Question

是的，显然我做错了。为什么不能像水平对齐东西一样容易？我坐下来，我的工作停止了好几个小时，试图查找如何在中间垂直对齐，所以我不必用我最愚蠢的傻孩子来惹你们这些真的对你来说很容易题。

显示块或表格单元格，我读过的所有内容都无法使用。我想“也许如果我将我的img与.divID img水平对齐然后垂直对齐div本身”，可悲的是，我希望它能够工作。但即使我尝试将div垂直居中放在中间，它也会使图像居中，但甚至无法工作。

TL; DR ：我讨厌尝试垂直对齐所以。

我正在尝试将标题图片垂直和水平居中。这是我正在处理的代码。

HTML

<div id="wrapper">
    <div id="header">
        <div id="logo">
            <img src="http://i.imgur.com/d0umnxt.png" />
        </div>
    </div>
</div>

CSS

body {
    margin: 0px;
}
#header {
    width: 100%;
    height: 100px;
    background-color: #151B1F;
}
#logo {
    display: block;
    margin: auto;
}

Answer 1

我讨厌table和table-cell和下一个人一样多，但是当你知道父元素的高度（在你的情况下是#header）时，事情变得非常简单。

Here's a working fiddle

您只需要在CSS中添加以下样式：

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

垂直对齐永远不会起作用

1 个答案: