html – 垂直对齐从来没有工作

是的,显然我做错了为什么不能像水平对齐的东西一样容易？我坐下来,我的工作暂停了几个小时,试图在中间查找如何垂直对齐,所以我不必用你的愚蠢最可能的错误你可能真的很容易你的问题.

显示块或表格单元格,我读取的一切从未有效.我以为“也许如果我水平地对齐我的img与.divID img,然后垂直对齐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;
}

解决方法

我讨厌桌子和桌面像下一个人一样多,但是当你知道父元素的高度(在你的情况下是#header)时,事情变得很容易.

Here’s a working fiddle.

您只需要将以下样式添加到您的CSS中：

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

原文地址：https://www.jb51.cc/html/230398.html