Home > Web Front-end > Front-end Q&A > What is the code for aligning both ends in css

What is the code for aligning both ends in css

WBOY
Release: 2021-12-30 15:13:02
Original
3327 people have browsed it

In CSS, the code to set the alignment of two pieces of code is "element {text-align:justify;}"; the "text-align" attribute is used to set the horizontal alignment of the text of the specified element. When the attribute value is set When it is justified, the elements will be aligned in two sections in the horizontal direction.

What is the code for aligning both ends in css

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

What is the code for aligning both ends in css?

The text-align attribute specifies the horizontal alignment of the element's text.

The attribute values ​​are as follows:

  • left Arrange the text to the left. Default: determined by the browser.

  • #right Arrange the text to the right.

  • #center Arrange the text to the center.

  • #justify Achieve the effect of aligning text on both ends.

  • #inherit Specifies that the value of the text-align attribute should be inherited from the parent element.

The syntax is as follows:

元素{
text-align:justify;
}
Copy after login

The example is as follows:

<!DOCTYPE html>
<html>
  <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>两端对齐文本<i></i></p>
  </body>
</html>
Copy after login

Output result:

What is the code for aligning both ends in css

(Learning video sharing: css video tutorial)

The above is the detailed content of What is the code for aligning both ends in css. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
css
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template