CSS在div底部对齐文本

时间:2014-12-28 19:18:49

标签: html css

我正在尝试将图片底部的文字“关于”对齐。红线表示我希望在底部对齐的文本中的位置。但是,当我在桌面和移动设备上进行尝试时,无论我尝试什么都会给出不一致的结果。它目前适用于我的笔记本电脑,您可以在此处查看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;
}

Align

文本位于一个div中,带有css position: absolute,我将它的div放在我的图像上(因此div的底部正确定位在图像的底部,这是应该的样子) 。但是现在我正试图让div中的文本正确定位。

我试过的所有事情都给出了不一致的结果。它将完美地定位在我的桌面上,但在移动设备上有不同的偏移量。

我尝试过的(我记得很多,尝试过很多次):

  • 我尝试在我的脚本中给div一个固定的偏移量来定位它。
  • 我尝试更改div的高度,按照我的意愿移动文本。
  • 然后我尝试将文本放在div中的span中,并通过设置bottom来移动span。这就是它目前的情况,并且是我所接触到的最接近它的地方,我尝试过的地方一样。

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

是否有一致的方法来对齐这样的文字?它可以在任何地方使用吗?

谢谢!

注意:我正在使用jquery来定位div。

2 个答案:

答案 0 :(得分:3)

这里最重要的是要了解你正在处理的事情:

  • 您要求的是将baseline字体与父容器的底部对齐,
  • 您需要了解的是(在您的图片中), div中的文字正确定位

您应该可以通过调整font-sizeline-height并使用position: absolute;position: relative;来实现您的目标。

font-size

您的图片显示文字位于父div的底部或几乎位于底部font-size。它之所以不是,line-height元素包括ascendersdescenders。您可以通过将文本更改为&#34; Apropos&#34;来查看此内容。然后你会看到额外的空间位用于g,j,p,q和y等字母的尾部。

line-height

可能正在进行的另一件事是文本的line-height: 1;是大于1的值。您可以通过检查元素并找出高度来检查(减去填充,边框和边距)仍然大于字体大小。

您可以设置值font-size以强制文本行与font-size声明指定的高度完全相同,但要注意这会导致单词“碰撞”#39} ;当有不止一行文字时。

Mobile -vs- desktop

这就留下了桌面和移动设备之间的差异。通过对line-heightposition: absolute;的全面了解,您应该能够:

  • 可靠地定位文本,以便文本元素的底部与父元素的下边缘对齐,并且
  • 使用position: relative;.slide-title { /* Substitute your own pixel sizes here */ bottom: -3px font-size: 16px; line-height: 1; position: absolute; } 将元素移动到您需要的精确位置

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

  • 您的移动设备可能具有与桌面浏览器不同的基本字体大小;由于您正在使用的文本大小为ems,这可能是一个因素(您也可以通过使用ems进行定位,但如果像素字体大小为或根目录附近的每个设备,级联中的某些东西会变得不同)
  • 你的CSS框架 - 如果有的话 - 可以调整小屏幕的字体大小

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

我会尝试类似下面的内容,如果它不起作用,那么就开始编写媒体查询以考虑大小/位置超出可接受范围的情况(请注意,如果这样做的话)通过CSS框架,您应该能够找到它自己使用的媒体查询并自己使用它们:

{{1}}

像素大小本身并不坏,并且由于现在几乎所有内容都允许文本扩展,因此如果它们使事情变得更简单,通常没有理由不使用它们。也就是说,如果您有一个令人信服的案例来使用ems,请首先尝试使用像素,然后在您使用ems后转换为ems。如果它在像素中工作但不在ems中工作,那么您需要检查级联以查看其不同之处以及原因。

答案 1 :(得分:0)

尝试这样做:

<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]更改为红线距图像底部的任意像素数