search

Home >Web Front-end >CSS Tutorial >How to use CSS to align text left, right and center

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

不言
不言Original
2018-11-15 10:26:4524626browse

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 :(文本位置）
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;

Setting method of text right alignment: 

text-align：right;

Setting method of text center alignment : 

text-align：center;

Text alignment setting method: 

text-align：justify;

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>

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;
}

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>

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>

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>

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!

Statement：
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
Previous article：What is the difference between DIV+CSS and table?Next article：What is the difference between DIV+CSS and table?

Related articles

See more