css怎麼設定兩個字和三個字對齊

2021-03-09 16:00:59

在css中,可以使用text-align屬性來讓兩個字和三個字對齊;只需要給文字元素設定「text-align: justify;」樣式即可,該樣式可以實現文字兩端對齊效果,讓三個字和兩個字對齊。

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

css兩個字和三個字對齊

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <style>
        p{
            width: 70px;
            height: 40px;
            line-height: 40px;
            background: paleturquoise;
            text-align: justify;
        }
        p > span {
            display: inline-block /* Opera */;
            padding-left: 100%;
        }
    </style>
</head>
<body>
    <p>你好<span></span></p>
    <p>大家好<span></span></p>
    <p>同學們好<span></span></p>
</body>
</html>

效果圖:

1.png

說明:

在CSS中,text-align 有一個屬性值為 justify ,為對齊之意。其實現的效果就是可以讓一行文字兩端對齊顯示(文字內容要超過一行)。

但是光使用它依然沒什麼卵用…..

要使文字兩端對齊,我們還得使用一個行內空標籤來助陣,比如 <span> 、 <i> 等等,這裡是我用 <i> 標籤

推薦教學: 、html視訊教學

以上就是css怎麼設定兩個字和三個字對齊的詳細內容,更多請關注TW511.COM其它相關文章!