How to set the alignment of two words and three words in css-CSS Tutorial-php.cn

How to set the alignment of two words and three words in css

青灯夜游

Release： 2023-01-03 09:28:42

Original

8636 people have browsed it

In CSS, you can use the text-align attribute to align two words and three words; you only need to set the "text-align: justify;" style to the text element, which can realize text Alignment effect, aligning three words and two words.

How to set the alignment of two words and three words in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css two-word and three-word alignment

<!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>

Copy after login

Rendering:

How to set the alignment of two words and three words in css

Instructions ：

In CSS, text-align has an attribute value of justify, which means alignment. The effect achieved is that a line of text can be displayed aligned at both ends (the text content must exceed one line).

But just using it is still useless...

To align the text at both ends, we have to use an inline empty tag to help, such as , tag

: CSS video tutorial, html video tutorial

The above is the detailed content of How to set the alignment of two words and three words in css. For more information, please follow other related articles on the PHP Chinese website!