How to align both ends of p tag in css-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to align both ends of p tag in css

Nov 29, 2021 pm 03:33 PM

css

Method: 1. Insert an i tag into the p tag and add the "display:inline-block;width:100%;" style to the i tag; 2. Add "text-align:justify" to the p tag ;" style, just set the p tag text style to align both ends.

How to align both ends of p tag in css

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

How to align both ends of the p tag in css

In css, text-align can be used to align both ends of the p tag. , the function of this attribute is to specify the horizontal alignment of the text in the element. When the value of this attribute is justify, the aligned text effect will be achieved.

How to align both ends of p tag in css

At the same time, this attribute alone cannot achieve alignment at both ends. Insert an i tag into the p tag. The example is as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>123</title>
    <style type="text/css">
    p{
        text-align:justify;  
    }
    p i{
        display:inline-block;
        width:100%;
    }
</style>
  </head>
  <body>
<p>设置两端对齐的p标签<i></i></p>
  </body>
</html>

Copy after login

Output results :

How to align both ends of p tag in css

(Learning video sharing: css video tutorial)

The above is the detailed content of How to align both ends of p tag in css. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn