首頁 > web前端 > css教學 > css文字居中怎麼打

css文字居中怎麼打

anonymity
發布: 2019-05-28 15:23:41
原創
12414 人瀏覽過

CSS text-align

text-align語法:

text-align : left | right | center | justify
登入後複製

text-align參數值與說明: 

left : 左對齊

right : 右對齊

center : 居中

*justify : 兩端對齊(不建議使用,通常大部分瀏覽器不使用)

#我們對text-align常用的參數值為left、right、center

text-align功能說明:

設定或檢索物件中文字的左中右對齊方式。

css文字居中怎麼打

案例示範:

我們設定3個盒子,分別都設定盒子CSS高度、CSS寬度相同,再分別設定三個盒子裡內容物靠左對齊、居中對齊、靠右對齊。

我們都設定3個盒子高度為50px;寬度為300px;便於觀察我們設定3個盒子都1個黑色邊框樣式。

1、HTML CSS程式碼

1)、CSS程式碼

.div1{ width:300px; height:50px; border:1px solid #000; text-align:left} 
.div2{ width:300px; height:50px; border:1px solid #000; text-align:center} 
.div3{ width:300px; height:50px; border:1px solid #000; text-align:right} 
/*  
div1 div2 div3 分别设置 靠左 居中 靠右对齐 
*/
登入後複製

2)、HTML程式碼

<div class="div1">我被靠左对齐</div> 
<div class="div2">我被居中显示</div> 
<div class="div3">我被靠右对齐</div>
登入後複製

以上是css文字居中怎麼打的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板