如何使用 CSS 将文本与容器底部对齐？答案

【问题标题】：How to align text flush with bottom of container using CSS?如何使用 CSS 将文本与容器底部对齐？
【发布时间】：2018-08-30 01:03:32
【问题描述】：

在以下示例中，我希望站点名称文本“站点名称”的底部和菜单文本“菜单 1 菜单 2 菜单 3”的底部与它们所在的容器底部对齐（标题）。就像现在一样，站点名称文本在其容器底部边缘上方的一些像素数，而菜单文本在同一边缘上方的不同像素数。我希望两个元素位于同一行。

似乎使用 line-height 可以通过不同值的反复试验将其向下推，但结果在浏览器之间并不一致（例如，我可以在 Safari 和 Chrome 中使它们刷新，但 Firefox 看起来不同）。一定有更好的方法吗？

另外，除了我的做法之外，有没有更好的方法来强制菜单进入右下角？

谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
        <head>
            <title></title>
            <style type="text/css">


        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, font, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td {
            margin: 0;
            padding: 0;
            border: 0;
        }

        body {
            text-align: center;
        }

        #container {
            margin:0 auto;
            margin-top:20px;
            width:800px;
            border:1px solid red;
            text-align: left;
        }

        #header {
            float:left;
            position:relative;
            width:100%;
            border:1px solid green;
        }

        #sitename {
            float:left;
            left:0px;
            bottom:0px;
            margin:0;
            padding:0;
            border:1px solid blue;
        }

        #sitename h1 {
            font-weight: normal;
        }       

        #menu {
            position:absolute;
            right:0;
            bottom:0;
            line-height:1em;
            float:right;
            list-style: none;
            border:1px solid blue;
        }

        #menu ul li {
            list-style: none;
            float:left;
            padding: 0 0 0 15px;
        }

        #sitename h1 {
            font-size: 3em;
        }

        </style>
    </head>

    <body>

    <div id="container">

        <div id="header">
            <div id="sitename">
                <h1>site name</h1>
            </div>
            <div id="menu">
                <ul id="nav">
                    <li>menu1</li>
                    <li>menu2</li>
                    <li>menu3</li>
                </ul>
            </div>
        </div>

        <div id="content">
        <p>here is some content.</p>
        </div>

        <div id="footer">
        <p>here is the footer.</p>
        </div>

    </div> <!-- container -->
    </body>
</html>

【问题讨论】：

此处布局 - jsfiddle.net/W3ECa

标签： html css alignment

【解决方案1】：

您无需将h1 包装在div 中。它已经是一个块级元素。试试这个代码：

<!-- CSS -->
#header {
  float:left;
  position:relative;
  width:100%;
  border:1px solid green;
  height: 100px;
}

#sitename {
  position: absolute;
  float:left;
  left:0px;
  bottom:0px;
  margin:0;
  padding:0;
  border:1px solid blue;
  font-weight: normal;
  font-size:3em;
}     

#menu {
  position:absolute;
  right:0;
  bottom:0;
  line-height:1em;
  float:right;
  list-style: none;
  border:1px solid blue;
}

#menu ul li {
  list-style: none;
  float:left;
  padding: 0 0 0 15px;
}

<!-- HTML -->
<div id="header">

  <h1 id="sitename">site name</h1>

  <div id="menu">
    <ul id="nav">
      <li>menu1</li>
      <li>menu2</li>
      <li>menu3</li>
    </ul>
  </div>

</div>

【讨论】：

有趣。感谢您指出 h1 是它自己的块级元素。不知道我为什么要包装它。有趣的是，它似乎更好地支持了行高操作。 firefox 仍然是与其他浏览器不匹配的浏览器（好吧，我还没有尝试过 IE），但它与其他浏览器的变化比以前少了。因此，我可以找到一个中间立场，在所有三个浏览器中看起来都不太一致的地方。不过，仍然希望有办法做到这一点。我会继续寻找，如果我发现任何东西会报告。
如果您以像素而不是 em 为单位设置标题的字体大小，您可以给它一个负的下边距（以像素为单位），这样跨浏览器看起来应该是一致的。

【解决方案2】：

您可以在#sitename h1 上设置负边距。例如

#sitename h1 {
  font-size: 3em;
  margin-bottom: -9px;
}

棘手的部分是让它在所有浏览器中完全对齐，因为它们之间相差一个像素左右。

【讨论】：

是的，不幸的是它存在跨浏览器变化的相同问题。
您可以通过为这些样式设置特定于浏览器的样式表来绕过它。它会给你一些开销，但你会得到你所追求的布局。

【解决方案3】：

我建议相对于当前位置定位站点名称，如下所示：

#sitename h1 {
   position: relative;
   top: 9px;
}

但是，这并不完美，因为如果使用不同的字体，间距可能会有所不同。这不是任何 CSS 属性都可以修复的（目前）。你可能会考虑一个图像？始终保持相同的高度？

【讨论】：

【解决方案4】：

您是否应用了任何类型的重置样式？每个浏览器对标题和列表等元素的填充和边距都有不同的默认值。如果您在样式表的开头重置所有内容，则可以更轻松地排列所有内容！

Eric Meyer 的重置 css 是一个很好的起点：http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

【讨论】：

【解决方案5】：

如果您可以使用视口宽度，它可以非常适合任何屏幕尺寸。

#sitename h1 {
  font-size: 9vw;
  margin-bottom: -2.2vw;
}

这很有用，因为我将文本用作背景中的图形元素。通常，您不希望将 font-size 设置为 vw（但通常您也不希望它与下面的元素齐平）。

【讨论】：