发表新帖
发表新帖

“vertical-align: middle” does not align to the middle in Firefox

后端 未结
关注
5 1821
执念已碎
执念已碎 2021-02-02 10:25

I\'m trying to align some text of different sizes vertically, however, Firefox displays the smaller text way above the middle.

CSS:

div.categoryLinks {
相关标签:
5条回答
  • 清歌不尽
    2021-02-02 10:45

    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;
    0 讨论(0)
  • 借酒劲吻你
    2021-02-02 10:47

    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.

    0 讨论(0)
  • 被撕碎了的回忆
    2021-02-02 10:50

    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.

    0 讨论(0)
  • 萌比男神i
    2021-02-02 10:57

    I had the same problem. This works for me:

     <style type="text/css">
    div.parent {
         position: relative;
    }

    /*vertical middle and horizontal center align*/
    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
    </style>

    <div class="parent">
        <img class="child"> 
    </div>
    0 讨论(0)
  • 太阳男子
    2021-02-02 11:05

    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 &#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.

    0 讨论(0)
 看不清?
提交回复
热议问题