I'm trying to create some buttons for a website using styled hyperlinks. I have managed to get the button looking how I want, bar one slight issue. I can't get the text ('Link' in the source code below) to vertically center.
Unfortunately there may be more than one line of text as demonstrated with the second button so I can't use line-height
to vertically center it.
My initial solution was to use display: table-cell;
rather than inline-block
, and that sorts the issue in Chrome, Firefox and Safari but not in Internet Explorer so I'm thinking I need to stick to inline-block.
How would I go about vertically centering the link text within the 57px
x 100px
inline-block
, and have it cater to multiple lines of text? Thanks in advance.
CSS:
.button { background-image:url(/images/categorybutton-off.gif); color:#000; display:inline-block; height:57px; width:100px; font-family:Verdana, Geneva, sans-serif; font-size:10px; font-weight:bold; text-align:center; text-decoration:none; vertical-align:middle; } .button:hover { background-image:url(/images/categorybutton-on.gif); } .button:before { content:"Click Here For\A"; font-style:italic; font-weight:normal !important; white-space:pre; }
HTML:
<a href="/" class="button">Link</a> <a href="/" class="button">Link<br />More Details</a>
The vertical-align property in CSS controls how elements set next to each other on a line are lined up. In order for this to work, the elements need to be set along a baseline. As in, inline (e.g. <span> , <img> ) or inline-block (e.g. as set by the display property) elements.
You have two options. You can use CSS's padding to add padding top and bottom, to make the text appear in the middle. This is useful for multiline text. You can exploit the line-height property to make the text vertically centred.
Inline block divs can be centered by applying text-align:center to their parent.
Many thanks @avrahamcool, works like a charm!
I have a little upgrade. You can replace redundant .Centerer span with css
.button:before { content: ''; display: inline-block; vertical-align: middle; height: 100%; }
See demo here: http://jsfiddle.net/modernweb/bXD2V/
NOTE: This will not work with text in "content" attribute.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With