Question

我正在尝试将子div标签与父div标签的底部或基线对齐。

我想做的就是让父Div的基线处有Div，这就是现在的样子：

HTML

<div id="parentDiv">
<div class="childDiv"></div>
</div>

CSS

#parentDiv
{
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}
#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
}

注意

我将有多个childDiv s具有不同的高度，我将需要它们全部与基线/底部对齐。

Answer 1

您需要添加以下内容：

#parentDiv {
  position: relative;
}

#parentDiv .childDiv {
  position: absolute;
  bottom: 0;
  left: 0;
}

在声明absolute元素时，它会根据最近的父static（必须是absolute，relative或fixed）来定位

Answer 2

七年后，对垂直对齐的搜索仍然提出了这个问题，所以我将发布另一个我们现在可用的解决方案：flexbox定位。只需在父div上设置display:flex; justify-content: flex-end; flex-direction: column（也在此fiddle中演示）：

#parentDiv
{
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width:300px;
  height:300px;
  background-color:#ccc;
  background-repeat:repeat
}

Answer 3

使用table和table-cell的CSS显示值：

<强> HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

<强> CSS

html,body {
    width: 100%;
    height: 100%;
}
.valign {
    display: table;
    width: 100%;
    height: 100%;
}
.valign > div {
    display: table-cell;
    width: 100%;
    height: 100%;
}
.valign.bottom > div {
    vertical-align: bottom;
}

我在这里创建了一个JSBin演示：http://jsbin.com/INOnAkuF/2/edit

该演示还提供了一个如何使用相同技术垂直居中对齐的示例。

Answer 4

这是有效的（我只测试过＆amp; ff）：

<html>
<head>
    <style type="text/css">
        #parent {
            height: 300px;
            width: 300px;
            background-color: #ccc;
            border: 1px solid red;
            position: relative;
        }
        #child  {
            height: 100px;
            width: 30px;
            background-color: #eee;
            border: 1px solid green;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="parent">parent
        <div id="child">child</div>
    </div>
    outside
</body>
</html>

希望有所帮助。

Answer 5

Y. Shoham发布的答案（使用绝对定位）似乎是容器固定高度的大多数情况下最简单的解决方案，但如果父DIV必须包含多个DIV并自动调整它基于动态内容的高度，则可能存在问题。我需要有两块动态内容;一个对齐到容器的顶部，一个对齐到底部，虽然我可以让容器调整到顶部DIV的大小，如果DIV对齐到底部更高，它将不会调整容器的大小但会延伸到外部。 romiem使用桌面式定位的上述方法虽然有点复杂，但在这方面更加稳健，并允许对齐底部和正确的容器自动高度。

CSS

#container {
        display: table;
        height: auto;
}

#top {
    display: table-cell;
    width:50%;
    height: 100%;
}

#bottom {
    display: table-cell;
    width:50%;
    vertical-align: bottom;
    height: 100%;
}

HTML

<div id=“container”>
    <div id=“top”>Dynamic content aligned to top of #container</div>
    <div id=“bottom”>Dynamic content aligned to botttom of #container</div>
</div>

我意识到这不是一个新的答案，但我想评论这种方法，因为它引导我找到我的解决方案，但作为一个新手，我不被允许评论，只发布。

Answer 6

您可能需要将子div设置为position: absolute。

将您的儿童风格更新为

#parentDiv .childDiv
{
  height:100px;
  width:30px;
  background-color:#999;
  position:absolute;
  top:207px;
}

Answer 7

一个旧帖子，但我想我会分享给任何人看的答案。因为当你使用absolute时，事情就会出错。我会做的是

HTML

<div id="parentDiv"></div>
<div class="childDiv"></div>

Css

parentDiv{

}
childDiv{
    height:40px;
    margin-top:-20px;
}

那就是将底部div放回到父div中。对于大多数浏览器也是安全的

Answer 8

我有类似的东西，并通过有效为孩子添加一些填充顶部来使其工作。

我确信这里的其他一些答案会得到解决方案，但是经过很长时间后我无法让它们轻松工作;我最终得到了padding-top解决方案，它的简洁优雅，但对我来说似乎有些讨厌（更不用说它设置的像素值可能取决于父高度）。

Answer 9

td {
  height: 150px;
  width: 150px;
  text-align: center;
}

b {
  border: 1px solid black;
}

.child-2 {
  vertical-align: bottom;
}

.child-3 {
  vertical-align: top;
}

<table border=1>
  <tr>
    <td class="child-1">
      <b>child 1</b>
    </td>
    <td class="child-2">
     <b>child 2</b>
    </td>
    <td class="child-3">
      <b>child 3</b>
    </td>
  </tr>
</table>

这是我的解决方法

Answer 10

如果您的父Div中有多个子Div，那么您可以使用如下所示的vertical-align属性：

.Parent div
{
  vertical-align : bottom;
}

将DIV与底部或基线对齐

10 个答案: