Centering the text in an imaged commandLink

Question

i have a p:commandLink with

.button{
    background-image: url(http://www.lefinnois.net/aqua/aqua1.jpg);
    display:inline-block;
    width:150;
    height:50;   
}
<p:commandLink update="media" value="Ok"
    action="#{productView.save}" styleClass="button">
</p:commandLink>

it is ok i have an imaged button.

but i want "Ok" text to take in place in the middle of the button image

what is your advice, i have tried something but no response so far.

i think it must be possible, if jsf is a web propramming platform.

SOLVED

i have to add padding to outside object to locate the inside object.

the code in the end:

.button{
        background-image: url(http://www.lefinnois.net/aqua/aqua1.jpg);
        display:inline-block;
        text-align: center;
        padding-top:10px;//you must set it according to the height of image
        width:150;
        height:50;   
    }

`padding-top` is a bad approach to center vertically. The position is this way dependent on font size. — BalusC, Dec 20 '11 at 11:53

BalusC · Accepted Answer · 2011-12-20T11:52:36.633

2

Set the CSS text-align property to center and set the line-height to the same height as element's height:

text-align: center;
line-height: 50px;

Don't forget to fix your width and height values to include the dimensions.

width: 150px;
height: 50px;

edited Dec 20 '11 at 11:52

answered Dec 20 '11 at 11:31

BalusC

1,082,665
372
3,610
3,555

That's correct. Do you also want to center vertically? You wasn't clear on that. Just set `line-height` to the same height as the element. I've updated the answer. – BalusC Dec 20 '11 at 11:51
if i understand right, i pass `height` value to `line-height` and it vertically centers the text. am i right? – merveotesi Dec 20 '11 at 13:29
2

Uh no, you can't pass variables around in CSS or something like that. Just set `line-height` to the same value as `height`. See also the example in my answer. Only in CSS frameworks like LESS and SASS you can use variables in CSS. – BalusC Dec 20 '11 at 13:31
Hi @BalusC. I have a problem about jsf s CSS logic, maybe pure CSS logic but i should ask here. The width is "button"s image width, am i right, but height which is also same as line-height is "line's height". How do we write these width and height properties within same curly brackets as if they define the same "object"(text line or button image background)? – merveotesi Jun 26 '15 at 14:39

Centering the text in an imaged commandLink

1 Answers1