Menu
To center both vertically and horizontally, use padding and text-align: center : I am vertically and horizontally centered.
To get them centered along a line, you'd use vertical-align: middle; . Although note that it centers the text according to its tallest ascender and deepest descender. Each element lines up according to the line you've set, which doesn't change from element to element.
For vertical alignment, set the parent element's width / height to 100% and add display: table . Then for the child element, change the display to table-cell and add vertical-align: middle . For horizontal centering, you could either add text-align: center to center the text and any other inline children elements.
Aligns the bottom of the element with the bottom of the parent element's font. middle. Aligns the middle of the element with the baseline plus half the x-height of the parent.
Vertical align only works as expected on table cells or display: inline-block elements. If you want more information I suggest you read Understanding vertical-align, or "How (Not) To Vertically Center Content".
Edit: You've got something else going on because that works for me as is on Firefox. I even dropped the font size of SECTION: right down and it's still centered. Have you used Firebug to see what other CSS is affecting it?
This works as is:
<html>
<head>
<style type="text/css">
div.categoryLinks {
margin: 1em 16px;
padding: 0 4px;
border-width: 1px 0;
border-style: solid;
border-color: #ece754;
background: #f7f5b7;
color: #a49f1c;
text-align: center;
font-size: 1.4em;
}
div.categoryLinks em {
font-size: 0.4em;
font-style: normal;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="categoryLinks">
<em>SECTION:</em>
Page One ·
Page Two ·
<a href="link">Page Three</a>
</div>
</body>
Note: section font size changed to 0.4em from original 0.6em to emphasize the point.
Firefox is rendering correctly. The vertical-align property is inline, which means it doesn't apply to block elements like <div> (and <p>, etc). Try adding display: inline and see if that works.
Vertical align is only supposed to apply to inline-block elements ( I think images are the only things that have this layout property by default), so to use it to position an inline element, first turn it into an inline block, then you can use margin and padding to position it similar to how you woudl a normal block element:
div.categoryLinks {
margin: 1em 16px;
padding: 0 4px;
border-width: 1px 0;
border-style: solid;
border-color: #ece754;
background: #f7f5b7;
color: #a49f1c;
text-align: center;
font-size: 1.4em;
}
div.categoryLinks em {
font-size: 0.6em;
display:inline-block;
vertical-align:top;
font-style: normal;
padding: 2px 0 0 0;
}
You have to tweak it a little for firefox 2 though, but this is because of a raer example of firefox not supporting web standards. On the other hand you could not bother with the tweak as few people still use ffx2, and it's only a very minor design flaw.
I fixed this issues just removing:
white-space: nowrap;
from parent div. I'm not sure why but with this rule added, Firefox doesn't apply the:
vertical-align: middle;
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