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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

效果如图所示 效果图

上次更新: 10/13/2020, 6:46:39 PM