[英]Centering left-aligned text over image
我想在始终居中的图像上输入文字。 以下代码实现了这一点。 但是,我还有一个要求,就是我希望文本本身左对齐,而不是居中,并且我想为文本指定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%;
}
您正在设置text-align:center;
在CSS中,将文本设置为居中对齐。 尝试将其更改为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。 确保父容器也具有相对位置,因为您希望它相对于父而不是整个页面绝对定位。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.