我正在尝试将图片底部的文字“关于”对齐。红线表示我希望在底部对齐的文本中的位置。但是,当我在桌面和移动设备上进行尝试时,无论我尝试什么都会给出不一致的结果。它目前适用于我的笔记本电脑,您可以在此处查看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中的文本正确定位。
我试过的所有事情都给出了不一致的结果。它将完美地定位在我的桌面上,但在移动设备上有不同的偏移量。
我尝试过的(我记得很多,尝试过很多次):
bottom
来移动span。这就是它目前的情况,并且是我所接触到的最接近它的地方,我尝试过的地方一样。我也尝试将div的垂直对齐设置为底部,但文本根本没有移动。
是否有一致的方法来对齐这样的文字?它可以在任何地方使用吗?
谢谢!
注意:我正在使用jquery来定位div。
答案 0 :(得分:3)
这里最重要的是要了解你正在处理的事情:
您应该可以通过调整font-size
和line-height
并使用position: absolute;
或position: relative;
来实现您的目标。
您的图片显示文字位于父div
的底部或几乎位于底部font-size
。它之所以不是,line-height
元素包括ascenders和descenders。您可以通过将文本更改为&#34; Apropos&#34;来查看此内容。然后你会看到额外的空间位用于g,j,p,q和y等字母的尾部。
可能正在进行的另一件事是文本的line-height: 1;
是大于1的值。您可以通过检查元素并找出高度来检查(减去填充,边框和边距)仍然大于字体大小。
您可以设置值font-size
以强制文本行与font-size
声明指定的高度完全相同,但要注意这会导致单词“碰撞”#39} ;当有不止一行文字时。
这就留下了桌面和移动设备之间的差异。通过对line-height
和position: absolute;
的全面了解,您应该能够:
position: relative;
或.slide-title {
/* Substitute your own pixel sizes here */
bottom: -3px
font-size: 16px;
line-height: 1;
position: absolute;
}
将元素移动到您需要的精确位置这就是你一直在做的事情。但如果它不能跨设备工作,那么可能正在发生的事情是你的字体大小在不同的设备上是不同的。这可能是真实的不止一个原因。例如:
我认为您可以使用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]更改为红线距图像底部的任意像素数