How to use CSS to align text left, right and center-CSS Tutorial-php.cn

How to use CSS to align text left, right and center

不言

Release： 2018-11-15 10:26:45

Original

24470 people have browsed it

The position of text is essential in web page layout. Today’s article will share with you how to use CSS to achieve left, right and center alignment of text. Let’s take a look at the specific content.

To set text alignment (left alignment, right alignment, center alignment), the CSS property you need to use is the text-align property. (Related recommendations: CSS Learning Manual)

Grammar format:

text-align :(文本位置）

Copy after login

Position	Description
left	Left alignment
right	Right alignment
center	Align in the center
justify	Align both ends

Continue us Let’s take a look at the setting methods of these four alignment methods respectively.

Setting method of text left alignment:

text-align：left;

Copy after login

Setting method of text right alignment:

text-align：right;

Copy after login

Setting method of text center alignment :

text-align：center;

Copy after login

Text alignment setting method:

text-align：justify;

Copy after login

Let’s look at the specific code example 1:

TextAlign.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="TextAlign.css" />
    <title></title>
    </head>
    <body>
  <div class="TextLeft">
    php中文网左对齐<br />
    php中文网<br />
    php中文网<br />
    php
  </div>
  <div class="TextRight">
    php中文网右对齐<br />
   php中文网<br />
    php中文网<br />
    php
  </div>
  <div class="TextCenter">
    php中文网居中对齐<br />
    php中文网<br />
    php中文网<br />
    php
  </div>
  <div class="TextJustify">
    php中文网<br />
    两端对齐<br />
    php中文网<br />
    php
    </div>
    </body>
    </html>

Copy after login

TextAlign.css

.TextLeft{
    margin-top:24px;    
    margin-left:32px;    
    border:1px solid #ff6a00;    
    width:480px;    
    text-align:left;
}
.TextRight {
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #ff6a00;    
    width: 480px;    
    text-align: right;
}
.TextCenter {
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #ff6a00;    
    width: 480px;    
    text-align: center;
}
.TextJustify {
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #ff6a00;    
    width: 480px;    
    text-align: justify;    
    text-justify: distribute-all-lines;
}

Copy after login

Display results

Use a web browser to display the above HTML file. The effect shown below will be displayed.

How to use CSS to align text left, right and center

Code Example 2:

Text left aligned:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.leftText{
  text-align:left; 
  }
	</style>
</head>
<body>
<div class="leftText">左对齐</div>
</body>
</html>

Copy after login

Text aligned right:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.rightText{
  text-align:right; 
  }
	</style>
</head>
<body>
<div class="rightText">右对齐</div>
</body>
</html>

Copy after login

Centered alignment:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.centerText{
  text-align:center; 
  }
	</style>
</head>
<body>
<div class="centerText">居中对齐</div>
</body>
</html>

Copy after login

This article ends here. For more information about text alignment, you can Pay attention to the CSS video tutorial column of the php Chinese website! ! !

The above is the detailed content of How to use CSS to align text left, right and center. For more information, please follow other related articles on the PHP Chinese website!