對齊( 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