{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 霸刀☆藐视天下 的问题《“vertical-align: middle” does not align to the mid》','https://www.manongdao.com/q-470450.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I'm trying to align some text of different sizes vertically, however, Firefox displays the smaller text way above the middle.
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.6em;
font-style: normal;
vertical-align: middle;
}
HTML:
<div class="categoryLinks">
<em>SECTION:</em>
Page One ·
Page Two ·
<a href="link">Page Three</a>
</div>
Screenshot:
(source: doheth.co.uk)
UPDATE: just to be clear, I am aware more-or-less how vertical-align works, i.e. I already know the common misconceptions.
From more investigation, it seems like the simplest way to fix this issue is to wrap the larger text in a span and set vertical-align on that too. The two children of .categoryLinks then align relative to each other. Unless someone can show a better way without extra markup?
I had the same problem. This works for me:
Vertical align only works as expected on table cells or 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:
Note: section font size changed to 0.4em from original 0.6em to emphasize the point.
I fixed this issues just removing:
from parent div. I'm not sure why but with this rule added, Firefox doesn't apply the:
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:
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.
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.