css - 文本在居中的 DIV 中对齐

Question

如何在屏幕居中的 div 上将文本左对齐？

Answer 1

使用 margin: auto 使 div 居中，使用 text-align: left 对齐文本:

HTML:

<div class='example'>Hi!</div>

CSS:

.example {
    margin: 0 auto;
    width: 100px;
    text-align: left;
    border: 1px solid red;
}

工作示例:http://jsfiddle.net/RichieHindle/4XHDt/1/

请注意，此示例中不需要 text-align: left，因为左对齐是默认设置。只有在父元素将对齐方式设置为 left 以外的其他内容时才需要它。