CSS如何實現文本左對齊、右對齊和居中對齊-創新互聯

本篇文章給大家分享的是有關CSS如何實現文本左對齊、右對齊和居中對齊，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

成都創新互聯于2013年開始，是專業互聯網技術服務公司，擁有項目成都做網站、成都網站建設網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元天壇街道做網站,已為上家服務,為天壇街道各地企業和個人服務,聯系電話:13518219792

語法格式：

text-align :(文本位置）

位置	說明
left	左對齊
right	右對齊
center	居中對齊
justify	兩端對齊

接下我們來分別看看這四種對齊方式的設置方法

文本左對齊的設置方法：

text-align：left;

文本右對齊設置方法：

text-align：right;

文本居中對齊設置方法：

text-align：center;

文本兩端對齊設置方法：

text-align：justify;

我們來看具體的代碼示例1：

TextAlign.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="TextAlign.css" />
    <title></title>
    </head>
    <body>
  <div class="TextLeft">
    創新互聯左對齊<br />
    創新互聯<br />
    創新互聯<br />
    php
  </div>
  <div class="TextRight">
    創新互聯右對齊<br />
   創新互聯<br />
    創新互聯<br />
    php
  </div>
  <div class="TextCenter">
    創新互聯居中對齊<br />
    創新互聯<br />
    創新互聯<br />
    php
  </div>
  <div class="TextJustify">
    創新互聯<br />
    兩端對齊<br />
    創新互聯<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;
}

顯示結果

使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的效果。

CSS如何實現文本左對齊、右對齊和居中對齊

代碼示例2：

文本左對齊：

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

文本右對齊：

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

居中對齊：

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

以上就是CSS如何實現文本左對齊、右對齊和居中對齊，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注創新互聯行業資訊頻道。

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網頁標題：CSS如何實現文本左對齊、右對齊和居中對齊-創新互聯
文章地址：http://m.kartarina.com/article2/cdchoc.html

成都網站建設公司_創新互聯，為您提供網站改版、App設計、品牌網站制作、網站制作、企業建站、網站營銷

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容