在图像上居中左对齐文本

Question

我希望在始终居中的图像上显示文字。下面的代码实现了这一点。但是，我还有一个进一步的要求，即我希望文本本身左对齐，而不是居中，并且我想为文本指定 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%;
}

Answer 1

您在 CSS 中设置 text-align:center;，这会将文本设置为居中对齐。尝试将其更改为 text-align: left;。

要将文本区域的最大宽度设置为 100 像素，您可能应该使用 width: 100px; 而不是 width:100%;。

Answer 2

我做了一个小提琴来演示解决方案：

http://jsfiddle.net/Ar14/gg076ew0/1/

#typewritter-text {
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    position: absolute;
}

这是您想要的 CSS。确保父容器也具有相对位置，因为您希望它相对于父容器而不是整个页面绝对定位。