如何在div中垂直对齐元素?

我有一个div与两个图像和一个h1。所有这些都需要在div中垂直对齐，彼此相邻。其中一个图像需要在div中绝对定位。

要在所有常见浏览器上工作，需要什么样的CSS ?

<div id="header">
  <img src=".." ></img>
  <h1>testing...</h1>
  <img src="..."></img>
</div>

当前回答

我发现了一个新的解决方案，垂直对齐多个文本行在一个div使用CSS 3(我也使用bootstrap v3网格系统来美化UI)，如下所示:

.immediate-parent-of-text-containing-div {
    height: 50px;         /* Or any fixed height that suits you. */
}

.text-containing-div {
    display: inline-grid;
    align-items: center;
    text-align: center;
    height: 100%;
}

根据我的理解，包含元素的文本的直接父元素必须有一定的高度。

2017-08-02 10:35:32

其他回答

下面是另一种(响应性的)方法:

html,
    body {
        height: 100%;
    }
    body {
        margin: 0;
    }

    .table {
        display: table;
        width:  auto;
        table-layout:auto;
        height: 100%;
    }
        .table:nth-child(even) {
            background: #a9edc3;
        }
        .table:nth-child(odd) {
            background: #eda9ce;
        }

    .tr {
        display: table-row;
    }
    .td {
        display: table-cell;
        width: 50%;
        vertical-align: middle;
    }

http://jsfiddle.net/herrfischerhamburg/JcVxz/

2013-11-22 16:28:28

所有这些都需要在div中垂直对齐

对齐的如何?图片的顶部与文字的顶部对齐?

其中一个图像需要在div中绝对定位。

相对于DIV的绝对定位?也许你可以把你要找的东西画出来?

fd描述了绝对定位的步骤，以及调整H1元素的显示，以便图像将与它内联显示。除此之外，我还要补充一点，你可以使用vertical-align样式来对齐图像:

#header h1 { display: inline; }
#header img { vertical-align: middle; }

.．.这将把标题和图像放在一起，顶部边缘对齐。还有其他对齐选项;请参见文档。你可能还会发现删除DIV并将图像移动到H1元素内部是有益的——这为容器提供了语义值，并消除了调整H1显示的需要:

<h1 id=header">
   <img src=".." ></img>
   testing...
   <img src="..."></img>
</h1>

2008-09-17 04:34:51

默认情况下，h1是一个块元素，将在第一个img之后的行上呈现，并将导致第二个img出现在块之后的行上。

为了阻止这种情况发生，你可以将h1设置为内联流行为:

#header > h1 { display: inline; }

至于绝对定位img在div中，你需要设置包含div的“已知大小”，这样才能正常工作。在我的经验，你还需要改变位置属性从默认位置:相对工作为我:

#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

如果你能让它工作，你可能想尝试逐步从div.header中删除高度、宽度、位置属性，以获得获得你想要的效果所需的最小属性。

更新:

下面是一个在Firefox 3上运行的完整示例:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Example of vertical positioning inside a div</title> <style type="text/css"> #header > h1 { display: inline; } #header { border: solid 1px red; position: relative; } #img-for-abs-positioning { position: absolute; bottom: -1em; right: 2em; } </style> </head> <body> <div id="header"> <img src="#" alt="Image 1" width="40" height="40" /> <h1>Header</h1> <img src="#" alt="Image 2" width="40" height="40" id="img-for-abs-positioning" /> </div> </body> </html>

2008-09-17 03:08:18

只需在div中使用一个单格表!只需设置单元格和表格的高度和与100%，你可以使用垂直对齐。

一个单元表内的div处理垂直对齐和向后兼容回石器时代!

2013-10-02 07:17:38

对我来说，它是这样工作的:

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px">
    <a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a>
</div>

“a”元素转换为按钮，使用Bootstrap类，它现在垂直居中在一个外部的“div”。

2015-07-07 21:13:38

如何在div中垂直对齐元素?

推荐文章

最新文章

标签