css - CSS 如何进行底部对齐div的内容?

  显示原文与译文双语对照的内容

假设我有一个HTML页面:


<body>
<div id="header">
 <h1>Header title</h1>
 header content (one or multiple lines)
</div>
<div id="content">
 bla bla bla
</div>
</body>

和相应的CSS:


#header {
 height: 150px;
}

页眉部分具有固定高度,但标题内容可能会改变。 我想将标题的内容垂直对齐到页眉部分,所以文本"置顶"的最后一行在页眉部分的底部。

所以如果只有一行文本,它就像:


-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------

bla bla bla

如果有三行:


-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

bla bla bla

如何在CSS中实现这一点?

时间:

Relative+absolute定位是你最好的选择:


 #header {
 position: relative;
 min-height: 150px;
 }
 #header-content {
 position: absolute;
 bottom: 0;
 left: 0;
 }

<div id="header">
 <h1>Title</h1>
 <div id="header-content">Some content</div>
</div>

但是你可能会遇到问题。 当我尝试它时,下拉菜单出现问题,出现在内容下方。 只是 is 。

老实说,对于垂直居中的问题,以及任何与项目垂直对齐的问题都不是固定的高度,使用表格更容易。

示例:可以在不使用表格的情况下进行这里HTML布局

使用CSS定位。


/* creates a new stacking context on the header */
#header
{ 
 position: relative; 
}

/* positions header-content at the bottom of header's context */
#header-content 
{ 
 position: absolute; 
 bottom: 0; 
}

就像 cletus 所指出的,你需要识别header-content以使这里工作生效。


<span id="header-content">some header content</span> 

在经历了一段时间的同一个问题之后,我终于想出了满足我所有需求的解决方案:

  • 不要求我知道容器的高度。
  • relative+absolute解决方案不同,内容不在它自己的层( 例如,它通常嵌入到容器div中) 中浮动。
  • 跨浏览器( IE8+ ) 工作。
  • 实现简单。

这个解决方案只需要一个 <div>,我称之为"aligner":

CSS


.bottom_aligner {
 display: inline-block;
 height: 100%;
 vertical-align: bottom;
 width: 0px;
}

HTML


<div class=bottom_aligner></div>
... Your content here.. .

这个技巧是通过创建一个高的细的div来工作的,它将文本基线推到容器底部。

下面是一个完整的示例,它实现了OP所要求的。 我已经为演示目的做了"bottom_aligner"厚和红色。


<!DOCTYPE html>
<html>
<head>
 <style>
.outer-container {
 border: 2px solid black;
 height: 175px;
 width: 300px;
}

.top-section {
 background: lightgreen;
 height:50%;
}

.bottom-section {
 background: lightblue;
 height:50%;
 marin:8px;
}

.bottom-aligner {
 display: inline-block;
 height: 100%;
 vertical-align: bottom;
 width:3px;
 background: red;
}

.bottom-content {
 display: inline-block;
}

.top-content {
 padding: 8px;
}
 </style>
</head>

<body>
 <div class=outer-container>
 <div class=top-section>
 This text <br> is on top.
 </div>
 <div class=bottom-section>
 <div class=bottom-aligner></div><div class=bottom-content>
 I like it here <br> at the bottom.
 </div>
 </div>
 </div>
</body>
</html>

enter image description here

内联或inline-block元素可以对齐块级元素的底部如果母公司的line-height/块元素大于的内联元素。*

标记:


<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

css:


h1.alignBtm { line-height:3em; }
h1.alignBtm span { line-height:1.2em; vertical-align:bottom;}

*make 确定你处于标准模式

我知道这已经超过 2年了,但是我设计了一种方法,比以前提到的更简单。

设置页眉div的高度。 然后在其中,按照如下方式设置你的H1标记:


float: left;
padding: 90px 10px 11px

我正在为一个客户端工作,而设计要求文本位于某个div的底部。 我已经使用这两行实现了结果,而且效果良好。 同样,如果文本展开,填充仍然保持不变。

如果有多个动态高度项,请使用表和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

演示还有一个例子,如何使用相同的技术垂直居中对齐。

如果你可以设置内容( #header-content如回复中所示)的包装div的高度,而不是整个 #header,,那么你也可以尝试以下方法:

HTML


<div id="header">
 <h1>some title</h1>
 <div id="header-content">
 <span>
 first line of header text<br>
 second line of header text<br>
 third, last line of header text
 </span>
 </div>
</div>

CSS


#header-content{
 height:100px;
}

#header-content::before{
 display:inline-block;
 content:'';
 height:100%;
 vertical-align:bottom;
}

#header-content span{
 display:inline-block;
}

显示在codepen标题栏上

...