CSS語法18:對齊 align、 text-align

對齊( align, text-align )

text-align

text-align 用來定義文字的對齊規則

text-align:left; 齊左
text-align:right; 齊右
text-align:center; 置中
text-align:justify; 分散對齊
text-align:inherit; 繼承父元素屬性

垂直置中方式

「文字」垂直置中,設定行高後,文字會垂直置中:

.textinside{
width: 300px;
background: #09c;
line-height:50px;
}
文字內容
「block 區塊元素」的垂直置中方式千奇百怪,目前沒有一個簡單、直覺的方式,先提供以下範例之一:
.bigbox {
width:300px; 
height:200px; 
background-color: #cc9900; 
line-height: 200px;/*修改這個值可以改變box2的垂直位置*/
text-align: center;/*讓box2水平置中,和垂直置中沒關係*/
}

.box2{
display: inline-block; 
height:50px; 
width: 50px;
background-color: #0099CC;
vertical-align: middle;
line-height:1;/*讓box2裡面的文字垂直位置正確*/
}
box2

 

Daco

DacoNote 網站工友,有燈泡壞掉請找我。

您可能也會喜歡…