CSS 垂直对齐：文本底部；

Question

CSS 垂直对齐：文本底部；

44

嗨，我想把文本放在<div>的底部。但是，vertical-align:text-bottom;和vertical-align:bottom;都不起作用。

问题在于它下面是我的导航按钮，如果我向下推它，它们就会失去对齐。

我能通过CSS解决这个问题吗？

a:link {color:#452809}
a:hover {text-decoration:underline;color:#f00}
a:visited {color:#3886e0}
.fleft {float:left}
.fright {float:right}
.clear {clear:both}
* {border:0;margin:0}
**body {font:12px Tahoma,Arial,Helvetica,sans-serif;color:#666;background:#3cb40d}
#main {margin:0 auto;width:780px;background:#fff url(images/vitalbodyhealth.gif) no-repeat center top}
#header {width:780px;margin:10px; height:210px}
#logo {padding-right:10px;text-align:right;padding-bottom:9px;height:150px;vertical-align:text-bottom} 
#logo a {text-decoration:none;text-transform:lowercase;font-style:italic;font-size:16px;color:#fff;font-weight:bold}
#logo H2 a {font-size:10px}
#buttons {padding-top:0px;height:40px;width:780px}
#buttons li {display:inline}
#buttons a {display:block;float:left;width:80px;height:26px;text-align:center;text-decoration:none;color:#fff;font-weight:bold;font-size:14px;padding-top:0px;margin-left:12px}
#buttons a:hover {width:80px;height:36px;text-decoration:underline}
#content {width:720px;margin:0 auto;padding:20px}**
.inner_copy {border:0;color:#f00;float:right;width:50%!important;margin:-100% 0 0 0;overflow:hidden;line-height:0;padding:0;font-size:11px}
#left {width:450px;padding:10px; background:#EFEFEF}
#left H1, #left H2 {color:#3cb40d;margin:0}
#left H1 {font-size:24px;padding:0}
#left H2 {font-size:18px;padding-top:10px}
#left a {color:#3886e0}
#left a:hover {text-decoration:none;color:#f00}
#left a:visited {color:#3886e0}
#right {float:right;width:240px; background:#EFEFEF}
#sidebar {width:240px;background:#EFEFEF}
#sidebar ul {margin:0;padding:0;list-style:none}
#sidebar li {margin-bottom:15px}
#sidebar li ul {padding:10px;border-top:none}
#sidebar li li {margin:0;padding:3px 0}
#sidebar li h2 {height:36px;margin:0;padding:10px 0 0 20px;background:#47872B;font-size:18px;color:#fff}
#sidebar a:link, #sidebar a:visited {text-decoration:none}
#sidebar a:hover {text-decoration:underline}
#sidebar li a {padding-left:10px;background:url(images/img09.gif) no-repeat 1px 5px}
#footer {background:#452809;height:47px;width:780px;margin:0 auto;font-size:10px;color:#fff;padding-top:23px;text-align:center;}
#footer div {padding:10px 38px}
#footer a {color:#fff;font-size:10px;text-decoration:none}
.padding {padding:10px;color:#f00;font-weight:bold}

任何帮助都将不胜感激。

:)

- Wizard

我们能否也有HTML呢？这可能有助于诊断问题。 - MadSkunk

我们需要看到你的HTML代码。提供一个实时示例会更容易让我们帮助你。你可以使用像jsbin.com或者jsfiddle.net这样的工具。 - aspirinemaga

5个回答

34

为了正确使用 vertical-align，您应该在 table 标签上进行设置。但是还有一种方法可以使其他HTML标记表现为表格，即为父元素指定 display:table 的CSS样式，并为子元素指定 display:table-cell 的CSS样式。然后，在该子元素上使用 vertical-align:bottom 即可生效。

HTML:

<div class="parent">
    <div class="child">
        This text is vertically aligned to bottom.    
    </div>
</div>

CSS：

.parent {
    width: 300px;
    height: 50px;
    display: table;
    border: 1px solid red;
}
.child { 
    display: table-cell;
    vertical-align: bottom;
}

这里是一个实时示例：链接演示

- aspirinemaga

非常感谢您的回复。这引发了一个真正的难题，因为应该在下方的导航按钮被移动到了顶部。我认为问题在于横幅上绘制了绿色条形图，因此导航按钮可以很好地放置。天啊，我是个新手。 - Wizard

1

如果由我决定，我会仅使用 line-height，它同样有效且比我建议的方法更简单。 - aspirinemaga

7

如果您的文本不会超过两行，那么您可以在CSS中使用line-height: ;，给予更多的行高将使其更低地保持在容器上。

- rcorrie

4

垂直对齐只在一些特定情况下起作用。使其正常工作的最简单方法是在父元素的CSS中设置 display: table，并在子元素中设置 display: table-cell;，然后应用你的垂直对齐属性。

- Levi Botelho

1

有时您可以通过调整填充和上边距、添加行高等方式进行排版。请参见fiddle。样式和文本来自@aspirinemaga的分支。

.parent
{
    width:300px;
    line-height:30px;
    border:1px solid red;
    padding-top:20px;
}

- user2060451

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- totymedli · Accepted Answer

现代解决方案

Flexbox正是为这些问题而创建的：

#container {
    height: 150px;/*Only for the demo.*/
    background-color:green;/*Only for the demo.*/
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

<div id="container">
    <span>Text align to center bottom.</span>
</div>

老派解决方案

如果您不想烦恼表格显示的问题，那么可以在相对定位的父容器中创建一个 <div>，将其绝对定位到底部，然后将其宽度设置为100％，这样就可以text-align居中：

#container {
    height: 150px;/*Only for the demo.*/
    background-color:green;/*Only for the demo.*/
    position: relative;
}

#text {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
}

<div id="container">
    <span id="text">Text align to center bottom.</span>
</div>