在圖像上將左對齊的文本居中

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

您正在設置text-align:center; 在CSS中，將文本設置為居中對齊。 嘗試將其更改為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。 確保父容器也具有相對位置，因為您希望它相對於父而不是整個頁面絕對定位。