将DIV与底部或基线对齐

94

我正在尝试将子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具有不同高度的，并且需要它们全部与基线/底部对齐。

html css

— 西亚
source

甚至都没有想到！我只是删除了parentDiv的高度，现在所有childDiv都位于基准线上。我只是一个愚蠢的小女孩！

— sia 2010年

但是，如果您希望它具有特定的高度，则应absolute根据父级使用定位。

— Y. Shoham

154

您需要添加以下内容：

#parentDiv {
  position: relative;
}

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

当声明absolute的元素，它是按照这不是它的最近的父定位static（它必须是absolute，relative或fixed）。

— 肖汉姆
source

7

我怀疑这是否满足了他的要求，目前这会将所有元素（如果有动态条形图，看起来将有多个子元素）彼此重叠。

— crmepham

50

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

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

— 贝尼森
source

1

简单。正是我想要的。使用align-items: flex-start;如果你不想STRETCH时的项目。

— Madhan'9

这是最近最好的答案！

— Rens Groenveld

12

使用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

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

— 罗米姆
source

1

对于桌子而言，有时这是最好的解决方案

— Sean256 '16

这对我来说是最好的解决方案

— bowlerae

这确实是最好的解决方案，因为使用绝对定位的元素通常会更改父元素的高度

— hamncheez

7

这有效（我只测试IE和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>

希望能有所帮助。

— 斯坦顿
source

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>

我意识到这不是一个新的答案，但我想对此方法发表评论，因为它使我找到了解决方案，但是作为一个新手，我不允许发表评论，只能发表评论。

— 尼克·吉拉德
source

3

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

将您的孩子样式更新为

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

— 拉维亚
source

我试过了，但是我需要的是childDiv的底部坐在parentDiv的底部，该图是动态的，并且高度从每个childDiv到下一个都将有所不同...定位可能有用但我没有退出想出了一个坚实的东西...

— sia

5

将top设置为207（一些任意数字）不是一个好主意，将bottom：0设置为底部：

— pstanton 2010年

2

一个旧的帖子，但以为我会寻找任何人分享答案。而且因为当您使用时，absolute事情可能会出错。我会做的是

的HTML

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

的CSS

parentDiv{

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

那只是将最下面的div放回到父div中。对大多数浏览器也安全

这将使childDiv在parentDiv底部的一半处。您需要至少在边距顶部使用-40px。也是使用position：relative;的最佳实践。在这种情况下，两个div都一样。

— 安格斯

1

我有类似的东西，可以通过向孩子有效地添加一些填充物来使其工作。

我敢肯定，这里还有其他一些答案可以解决该问题，但是经过很长一段时间后，我无法让它们轻松工作。相反，我最终得到了padding-top解决方案，该解决方案简单易用，但对我来说似乎有点of琐（更不用说它设置的像素值可能取决于父级高度）。

— Cellepo
source

0

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>

展开摘要

这是我的解决方案

— 新兴市场
source

-6

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

.Parent div
{
  vertical-align : bottom;
}

— 帕万
source

为什么这么多没有对此发表评论的否决？它不能解决问题吗？在线研究表明应该。

— sholsapp 2014年