ansaurus

Question

"vertical-align: middle" does not align to the middle in Firefox

Answer 1

+2 A:

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.

sli 2009-04-08 22:32:22

Or, possibly, inline-block. Depending on the implementation (and cross-browser support) it might offer the best of both worlds.

David Thomas 2009-04-08 22:41:04

He applies it to <em>SECTION:</em> which is already inline by default.

buti-oxa 2009-04-08 23:20:36

Setting the em to inline block does not make a difference, it's still higher in Firefox.

DisgruntledGoat 2009-04-09 00:07:47

Whoops, you're right, buti-oxa. I need to learn to read more attentively.

sli 2009-04-09 00:48:03

Answer 2

+1 A:

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.

wheresrhys 2009-04-08 22:33:37

Setting the em to inline block does not make a difference, it's still higher in Firefox.

DisgruntledGoat 2009-04-09 00:07:14

but the point is that once you have display:inline-block you can then add some padding-top to the em too to push it down.

wheresrhys 2009-04-09 00:41:24

Answer 3

+7 A:

Vertical align only works as expected on table cells. 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 &#183;
        Page Two &#183;
        <a href="link">Page Three</a>
</div>
</body>

Note: section font size changed to 0.4em from original 0.6em to emphasize the point.

cletus 2009-04-08 22:33:57

Just to add to this, you can try `display:table-cell` but I'm not sure what the browser support is for it.

DrG 2009-04-08 22:51:20

He is talking about text-align: center CSS property, not about valign HTML property.

buti-oxa 2009-04-08 23:19:10

@buti-oxa: No he's not. He's talking about CSS vertical-align property

KOGI 2009-04-08 23:49:01

ansaurus

tags:

views:

answers:

"vertical-align: middle" does not align to the middle in Firefox

related questions