我希望文本覆盖始终居中的图像。以下代码实现了这一点。但是,我还有一个进一步的要求,即我希望文本本身左对齐,而不是居中,并且我想为文本指定 100px 的宽度,以便单词换行。我怎样才能做到这一点?
<div id="typewritter-text">
<span id='typewritter'>Lorem Ipsum</span>
</div>
#typewritter-text {
color: white;
position: absolute;
left: -65px;
position:absolute;
text-align:center;
top: 400px;
width: 100%;
}
您在 CSS 中设置text-align:center;
,这会将文本设置为居中对齐。 尝试将其更改为 text-align: left;
。
要将文本区域的最大宽度设置为 100 像素,您可能应该执行width: 100px;
而不是width:100%;
。
我做了一个小提琴来演示解决方案:
http://jsfiddle.net/Ar14/gg076ew0/1/
#typewritter-text {
top: 0;
left: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
position: absolute;
}
这是您想要的 CSS。确保父容器上也有相对位置,因为您希望它相对于父容器而不是整个页面绝对定位。