怎么在css中設(shè)置文本水平對(duì)齊

發(fā)布時(shí)間：2021-04-02 14:16:21 來源：億速云閱讀：402 作者：Leah 欄目：web開發(fā)

怎么在css中設(shè)置文本水平對(duì)齊？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

css中可用text-align屬性來設(shè)置文本的水平對(duì)齊方式，語法為“text-align:left|right|center|justify”；值left設(shè)置左對(duì)齊，right設(shè)置右對(duì)齊，center設(shè)置居中，justify設(shè)置兩端對(duì)齊。

在一個(gè)塊級(jí)容器中，當(dāng)一行中的行內(nèi)級(jí)框的總寬度，小于容器的寬度時(shí)，通過 text-align屬性來指定這些行內(nèi)級(jí)框在行中的水平分布。

事實(shí)上，text-align屬性是通過指定行框與哪個(gè)點(diǎn)對(duì)齊，來決定行內(nèi)級(jí)框在行中如何進(jìn)行水平分布。他只能應(yīng)用于塊級(jí)元素，它的最典型應(yīng)用，就是指定段落中每一行內(nèi)容的水平對(duì)齊方式。

段落是一個(gè)塊級(jí)容器，容器中的每一行內(nèi)容都會(huì)生成一個(gè)行框，就可以把段落看做是這些行框的堆疊。由于并非每一行的內(nèi)容都能填滿容器的寬度，因此，就可以通過 text-align屬性，來指定每一行中內(nèi)容的水平對(duì)齊方式。

<!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標(biāo)簽我是p標(biāo)簽我是p標(biāo)簽</p>
        <p style="direction: rtl;">我是p標(biāo)簽我是p標(biāo)簽我是p標(biāo)簽</p>
        <p style="text-align: right;">我是p標(biāo)簽我是p標(biāo)簽我是p標(biāo)簽</p>
        <p style="text-align: left;">我是p標(biāo)簽我是p標(biāo)簽</p>
        <p style="text-align: center;">我是p標(biāo)簽我是p標(biāo)簽我是p標(biāo)簽</p>
        <p style="line-height: 30px;background: lightblue;">我是p標(biāo)簽我是p標(biāo)簽</p>
        <p style="vertical-align:baseline;">我是p標(biāo)簽我是p標(biāo)簽我是p標(biāo)簽</p>
        <p>A<span style="vertical-align: sub;">4</span></p>
        <p>Q<span style="vertical-align: super;">2</span></p>
        <div style="background: lightblue;height: 30px;">
            我是div
            <span class="a1">
                我是s
            </span>
        </div>
    </body>
</html>

怎么在css中設(shè)置文本水平對(duì)齊

關(guān)于怎么在css中設(shè)置文本水平對(duì)齊問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

向AI問一下細(xì)節(jié)

怎么在css中設(shè)置文本水平對(duì)齊

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽