css文本怎么设置水平对齐

本文操作环境：Windows7系统、HTML5& & CSS3版，DELL G3电脑

在一个块级容器中，当一行中的行内级框的总宽度，小于容器的宽度时，通过 text-align属性来指定这些行内级框在行中的水平分布。

事实上，text-align属性是通过指定行框与哪个点对齐，来决定行内级框在行中如何进行水平分布。他只能应用于块级元素，它的最典型应用，就是指定段落中每一行内容的水平对齐方式。

段落是一个块级容器，容器中的每一行内容都会生成一个行框，就可以把段落看做是这些行框的堆叠。由于并非每一行的内容都能填满容器的宽度，因此，就可以通过 text-align属性，来指定每一行中内容的水平对齐方式。

!DOCTYPE html>
    html>
        head>
            meta charset="UTF-8">
            tITle>
    /title>
            style type="text/css">
            .a1{
                    /*vertical-align: top;
     background: lightcoral;
    opacity: 0.7;
    */                /*vertical-align: text-top;
    background: lightgray;
    */                /*vertical-align: middle;
    font-Size: 30px;
    */                /*vertical-align: bottom;
    background: lightgray;
    */                vertical-align: text-bottom;
            }
                        /style>
        /head>
        body>
            p style="direction: ltr;
    ">
    我是p标签我是p标签我是p标签/p>
            p style="direction: rtl;
    ">
    我是p标签我是p标签我是p标签/p>
            p style="text-align: right;
    ">
    我是p标签我是p标签我是p标签/p>
            p style="text-align: left;
    ">
    我是p标签我是p标签/p>
            p style="text-align: center;
    ">
    我是p标签我是p标签我是p标签/p>
            p style="line-height: 30px;
    background: lightblue;
    ">
    我是p标签我是p标签/p>
            p style="vertical-align:baseline;
    ">
    我是p标签我是p标签我是p标签/p>
            p>
    Aspan style="vertical-align: sub;
    ">
    4/span>
    /p>
            p>
    Qspan style="vertical-align: super;
    ">
    2/span>
    /p>
            div style="background: lightblue;
    height: 30px;
    ">
                我是div            span class="a1">
                    我是s            /span>
            /div>
        /body>
    /html>
    

推荐学习：《css视频教程》

以上就是css文本怎么设置水平对齐的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！