CSS在div底部对齐文本答案

【问题标题】：CSS Align text at bottom of divCSS在div底部对齐文本
【发布时间】：2014-12-29 19:12:29
【问题描述】：

我正在尝试对齐图像底部的“关于”文本。红线表示我要在底部对齐的文本中的位置。但是，当我在桌面和移动上尝试时，无论我尝试什么，都会产生不一致的结果。它目前可以在我的笔记本电脑上运行，您可以在此处查看它http://theoddler.github.io/（单击图像以“打开”幻灯片。）

这就是 html 的样子：（它托管在 github，所以我使用的是液体标签）

<div class="slide_title">
    <span>{{ include.title }}</span>
</div>

<div class="slide_heading clickable">
    <img src="{{ include.image }}" width="100%" alt="{{ include.title }}"/>
</div>

CSS：

.slide .slide_title {
    font-size: 4.938em;
    color: #f8f8f8;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;

    pointer-events:none;

    position: absolute;
    left: 0.000em;
    top: 14.188em; /*some default when no javascript is used, otherwise set in js*/
}

.slide .slide_title span {
    position: absolute;
    bottom: -0.24em;

    white-space: nowrap;

    text-shadow: 0 0 0.05em #999999;
}

文本在一个 div 中，带有 css position: absolute，我将它的 div 与我的图像放在一起（所以 div 的底部正确地定位在图像的底部，这就是它应该的样子）。但是现在我正在尝试正确定位 div 中的文本。

我尝试的所有结果都不一致。它会在我的桌面上完美定位，但在移动设备上会有不同的偏移量。

我尝试了什么（我记得，尝试了很多）：

我尝试在我的脚本中给 div 一个固定的偏移量来定位它。
我尝试更改 div 的高度，以便根据需要移动文本。
然后我尝试将文本放在 div 内的 span 中，并通过将其设置为 bottom 来移动 span。这是目前的情况，也是我最接近的情况，在我尝试过的所有地方都被平均抵消。

我也尝试将div的垂直对齐设置为底部，但文本根本没有移动。

有没有一致的方法来对齐这样的文本？所以它可以在任何地方工作吗？

谢谢！

注意：我使用 jquery 来定位 div。

【问题讨论】：

请发布您的代码。
您尝试display: table-cell 并添加vertical-align: bottom 了吗？
@j 08691 我会用一些代码来编辑它。 @lolbas 刚刚做了，没用 :(
@TheOddler 我不太确定，但使用萤火虫并将top: 290px 设置为element.style 做了你想要的
@lolbas，是的，我可以设置顶部以便它在我的笔记本电脑上工作，但是当我在手机上打开它时，它的位置不正确。我尝试的所有东西都正确定位它，但只在我的笔记本电脑上而不是在我的手机上。我可以为我的手机正确定位它，但在我的笔记本电脑上它就不正确了。我正在寻找方法，所以它在任何地方都是一致的。

标签： html css

【解决方案1】：

这里的主要内容是了解您正在处理的内容：

您要求的是字体的baseline 与父容器的底部对齐，
您需要意识到的是（在您的图像中），div 中的文本位置正确

您应该能够通过调整font-size 和line-height 并使用position: absolute; 或position: relative; 来实现您所需要的。

font-size

您的图像显示文本位于或几乎位于父级 div 的底部。原因是元素的font-size 包括ascenders 和descenders。您可以通过将文本更改为“Apropos”之类的内容来查看这一点。然后您会看到额外的空间用于 g、j、p、q 和 y 等字母的尾部。

line-height

可能正在发生的另一件事是文本的 line-height 的值大于 1。您可以通过检查元素并找出高度（减去内边距、边框和边距）仍然大于字体大小。

您可以设置值 line-height: 1; 以强制文本行与 font-size 声明指定的高度完全相同，但请注意，当文本超过一行时，这会导致单词“碰撞” .

移动 - 与桌面

这就留下了台式机和移动设备之间的差异问题。彻底了解font-size 和line-height，您应该能够：

可靠地定位文本，使文本元素的底部与父元素的底部边缘对齐，并且
使用position: absolute; 或position: relative; 将元素移动到您需要的精确位置

这就是你一直在做的事情。但如果它不能跨设备工作，那么可能发生的事情是您的字体大小在不同设备上是不同的。这可能是真的有不止一个原因。例如：

您的移动设备的基本字体大小可能与桌面浏览器不同；由于您正在使用的文本的大小以 ems 为单位，这可能是一个因素（您也通过使用 ems 进行定位，但如果根处或附近的像素字体大小不同 每个设备级联中的某些东西最终会有所不同）
您的 CSS 框架（如果有的话）可能会针对小屏幕调整字体大小

我认为您可以通过media queries 和像素大小的某种组合来解决问题。

我会尝试以下类似的方法，如果不起作用，则开始编写媒体查询以解决大小/位置超出可接受范围的情况（请注意，如果这是由CSS 框架，您应该能够找到它正在使用的媒体查询并自己使用它们）：

.slide-title {
  /* Substitute your own pixel sizes here */
  bottom: -3px
  font-size: 16px;
  line-height: 1;
  position: absolute;
}

像素大小本身并不坏，而且由于现在几乎所有内容都允许文本缩放，如果它们使事情变得更简单，通常没有理由不使用它们。也就是说，如果您确实有一个令人信服的案例来使用 em，请先尝试使用像素，然后在您使用它后转换为 em。如果它以像素为单位而不是以 ems 为单位，那么您需要检查级联以了解不同之处以及原因。

【讨论】：

【解决方案2】：

尝试这样做：

<div class='slide_wrapper'>
   <div class="slide_title">
       <span>{{ include.title }}</span>
   </div>

   <div class="slide_heading clickable">
       <img src="{{ include.image }}" width="100%" alt="{{ include.title }}"/>
   </div>
</div>

css:

.slide_wrapper {
   position: relative;
}

.slide_title {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 2;
}
.slide_heading {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1;
}

然后在jquery中：

var w = $("slide_heading").width();
var h = $("slide_heading").height();
$(".slide_wrapper").css({width: w, height: h});
$(".slide_title").css({width: w, height: h, line-height: (h - 20px)});

这是未经测试的，但我很确定它应该可以工作：/ 将 [b]20px[/b] 更改为红线距离图像底部的任意像素数

【讨论】：