text-align

text-align

在开发中，遇到出现无法居右的问题，最后发现是对 text-align 理解的问题。 css 中的元素一共有三类：块元素、行内块和内联元素，三者区别：

• 块元素可以设置宽高，会独占一行，display 的值为 block 的元素，如 div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5 新增的 header、section、aside、footer 等，
• 行内块拥有块元素的所有特性，除了无法独占一行，display 属性值为 inline-table, inline-block, inline-flex, inline-grid 的元素，
• 内联元素无法设置宽高，不会独占一行 display 属性值为 inline 的元素，span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认 display：inline-block

text-align 的作用是：可以为文字和内联元素、行内裤块元素设置水平居中，即使该文字是在块级元素内。

<div class="wrapper">
    <img src="img/2.png" /><br />
    <span>这是span内联元素中的文字</span>
    <div>这是块元素div中的文字</div>
</div>

<ul>
    <li class="wrapper">
        <span class="span"></span>
        <div class="div"></div>
        <span class="span2"> 我是行内块元素，是有文字的span </span><br />
        <div class="div2">我也是行内块元素，是div</div>
        <br />
        <span class="span2"></span><br />
        <div class="div2"></div>
        <br />
    </li>
</ul>

.wrapper {
    width: 500px;
    border: 1px solid black;
    margin: 0 auto;
    text-align: center;
}
.span {
    display: block;
    width: 50px;
    height: 50px;
    background: #bac;
}
.div {
    width: 50px;
    height: 50px;
    background: hotpink;
}
.span2 {
    display: inline-block;
    width: 150px;
    height: 50px;
    background: #bac;
}
.div2 {
    display: inline-block;
    width: 150px;
    height: 50px;
    background: hotpink;
}

效果如图所示