【问题标题】:Vertical align inside div, vertical-align: middle not workingdiv内垂直对齐,垂直对齐:中间不起作用
【发布时间】:2019-10-20 08:27:53
【问题描述】:

垂直对齐:中间;不工作。

From css file :
#header {height:150px; text-align: center; vertical-align: middle;}

<div id="header">
    <img alt="" id="logo" src="images/logo.png" />
</div>

如果它有助于将徽标与包装器 div 的中心对齐,我会将徽标包装在另一个 div 中。

【问题讨论】:

    标签: html css vertical-alignment


    【解决方案1】:

    这样做

    #header {display:table;}
    #logo {display:table-cell; vertical-align:middle;}
    

    Reference

    【讨论】:

    • 你需要为此使用 CSS hack
    • 这是最好的答案!所有其他答案都试图重塑 HTML。
    • 虽然不支持 IE7
    • 但是,与块相比,这改变了 div 的对齐方式
    【解决方案2】:

    您只能通过填充来做到这一点,因为 line-height 和 vertical-align 的其他两种方式不能在 img.... 上工作。

    #logo
    {
    padding: 20px 0;
    }
    

    20px 可以是任何你需要的东西。

    【讨论】:

    • ,这行得通,但我认为这是一种 hack,只是不明白为什么 vertical-alig:middle 不起作用。
    • 我对 css 很擅长,但还是经常面对这个问题,vertical-align 在很多地方都不能满足我们的要求
    • @Chuchelo:这不是一个 hack,因为在这种情况下没有垂直对齐之类的东西,因为它只用于内联元素。搜索 vertical align cssyou will find thousands of explanations and workarounds
    【解决方案3】:

    另一种选择,尽管它有其局限性:

    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
       <div style="height:150px; text-align: center;">
          <img src="/centerme.jpg" style="position: relative; top: 50%; margin-top: -25px;" />
       </div>
    </body>
    </html>
    

    负边距应该是图片高度的一半。所以下面的图片会在上面的 HTML 中居中​​:

    如果您碰巧有一个改变高度的 div,这会使居中动态化。不过,相对定位可能会有点棘手,因为图像是从正常的布局流程中取出的。

    【讨论】:

    • 射击,当我提交这个时,我还没有看到佩德罗的回应。我希望我可以轻松删除我的答案:-)
    【解决方案4】:
    #logo {
        position: absolute;
        top: 50%;
        margin-top: -75px;
    }
    

    做垂直对齐的常用方法。 top 为 50%,margin-top 为父 div 尺寸的一半。

    【讨论】:

    • 当然家长潜水必须指定position: relative;的风格
    【解决方案5】:

    我喜欢这样做:

    <div style="relative">
    <img alt="" id="logo" src="images/logo.png" style="position: absolute; top:50%; top-margin:-75px"/>
    </div>
    

    【讨论】:

    • 这是一个立场:绝对;不是绝对的。
    • @lnuyasha:style="relative" 也应该换成style="position: relative",不是吗?
    【解决方案6】:

    我不知道为什么它在我的情况下起作用...但我可以通过以下操作看到它起作用:

    div {padding-top: 0%;}
    

    【讨论】: