如何使用CSS實現文字左對齊、右對齊和居中對齊-css教學-PHP中文網

首頁

web前端

css教學

如何使用CSS實現文字左對齊、右對齊和居中對齊

不言

Nov 15, 2018 am 10:26 AM

對齊

文字的位置在網頁佈局中是必不可少的，今天的這篇文章就來給大家分享關於使用CSS實現文本左對齊、右對齊和居中對齊的方法，下面我們來看具體的內容。

要設定文字對齊（左對齊，右對齊，居中對齊）需要用到的CSS屬性是text-align屬性。（相關建議：CSS學習手冊）

語法格式：

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

顯示結果

使用網頁瀏覽器顯示上述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>

本篇文章到這裡就全部結束了，更多關於文字對齊的內容大家可以關注php中文網的

CSS影片教學欄位！！！

以上是如何使用CSS實現文字左對齊、右對齊和居中對齊的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

什麼是CSS網格？Apr 30, 2025 pm 03:21 PM

CSS網格是創建複雜，響應式Web佈局的強大工具。它簡化了設計，提高可訪問性並提供了比舊方法更多的控制權。

什麼是CSS Flexbox？Apr 30, 2025 pm 03:20 PM

文章討論了CSS FlexBox，這是一種佈局方法，用於有效地對齊和分佈響應設計中的空間。它說明了FlexBox用法，將其與CSS網格進行了比較，並詳細瀏覽了瀏覽器支持。

我們如何使用CSS使網站迅速響應？Apr 30, 2025 pm 03:19 PM

本文討論了使用CSS創建響應網站的技術，包括視口元標籤，靈活的網格，流體媒體，媒體查詢和相對單元。它還涵蓋了使用CSS網格和Flexbox一起使用，並推薦CSS框架

CSS盒裝屬性有什麼作用？Apr 30, 2025 pm 03:18 PM

本文討論了CSS盒裝屬性，該屬性控制了元素維度的計算方式。它解釋了諸如Content-Box，Border-Box和Padding-Box之類的值，以及它們對佈局設計和形式對齊的影響。

我們如何使用CSS動畫？Apr 30, 2025 pm 03:17 PM

文章討論使用CSS，關鍵屬性並與JavaScript結合創建動畫。主要問題是瀏覽器兼容性。

我們可以使用CSS向我們的項目添加3D轉換嗎？Apr 30, 2025 pm 03:16 PM

文章討論了Web項目的3D轉換，關鍵屬性，瀏覽器兼容性和性能注意事項的討論。（角色計數：159）

我們如何在CSS中添加梯度？Apr 30, 2025 pm 03:15 PM

文章討論了使用CSS梯度（線性，徑向，重複）來增強網站視覺效果，添加深度，焦點和現代美學。

CSS中的偽元素是什麼？Apr 30, 2025 pm 03:14 PM

文章討論了CSS中的偽元素，它們在增強HTML樣式方面的使用以及與偽級的差異。提供實用的例子。

See all articles

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。