CSS 水平對齊(Horizontal Align)

CSS 水平對齊(Horizontal Align)


在CSS中,有幾個屬性用於元素水平對齊。


塊元素對齊

塊元素是一個元素,佔用了全寬,先後都是換行符。php

塊元素的例子:css

  • <h1>html

  • <p>瀏覽器

  • <div>佈局

文本對齊,請參閱 CSS文本 章節。.spa

在這一章中,咱們會告訴你塊元素如何水平對齊佈局。code


中心對齊,使用margin屬性

塊元素能夠把左,右頁邊距設置爲"自動"對齊。orm

Note: 在IE8中使用margin:auto屬性沒法正常工做,除非聲明 !DOCTYPEhtm

margin屬性可任意拆分爲左,右頁邊距設置自動指定,結果都是出現居中元素:文檔

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

提示: 若是寬度是100%,對齊是沒有效果的。

注意:IE5中塊元素有一個margin處理BUG。爲了使上述例子能工做,在IE5中,須要添加一些額外的代碼。 實例


使用position屬性設置左,右對齊

元素對齊的方法之一是使用絕對定位:

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

注意:絕對定位與文檔流無關,因此它們能夠覆蓋頁面上的其它元素。


Crossbrowser 兼容性問題

元素的填充,始終是一個好主意。這是爲了不在不一樣的瀏覽器中的可視化差別。

IE8和早期有一個問題,當使用position屬性時。若是一個容器元素(在本例中<div class="container">)指定的寬度,!DOCTYPE聲明是缺失,IE8和早期版本會在右邊增添17px的margin。這彷佛是一個滾動的預留空間。使用position屬性時始終設置在DOCTYPE聲明中!

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

使用float屬性設置左,右對齊

使用float屬性是對齊元素的方法之一:

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

Crossbrowser兼容性問題

相似這樣的元素對齊時,預先肯定margin和

元素的填充,始終是一個好主意。這是爲了不在不一樣的瀏覽器中的可視化差別。

IE8和早期有一個問題,當使用float屬性時。若是一個容器元素(在本例中<div class="container">)指定的寬度,!DOCTYPE聲明是缺失,IE8和早期版本會在右邊增添17px的margin。這彷佛是一個滾動的預留空間。使用float屬性時始終設置在DOCTYPE聲明中!

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
相關文章
相關標籤/搜索