建站
咨詢
售后
建站咨詢
新聞中心
CSS 水平對(duì)齊 (Horizontal Align)
關(guān)于 CSS 中元素的水平對(duì)齊 (Horizontal Align)，你可以使用多種屬性來(lái)進(jìn)行設(shè)置。
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),蒲城企業(yè)網(wǎng)站建設(shè),蒲城品牌網(wǎng)站建設(shè),網(wǎng)站定制,蒲城網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,蒲城網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。
在CSS中，有幾個(gè)屬性用于元素水平對(duì)齊。
塊元素對(duì)齊
塊元素是一個(gè)元素，占用了全寬，前后都是換行符。
塊元素的例子：
文本對(duì)齊，請(qǐng)參閱 CSS文本 章節(jié)。.
在這一章中，我們會(huì)告訴你塊元素如何水平對(duì)齊布局。
中心對(duì)齊,使用margin屬性
塊元素可以把左，右頁(yè)邊距設(shè)置為"自動(dòng)"對(duì)齊。
Note: 在IE8中使用margin:auto屬性無(wú)法正常工作，除非聲明 !DOCTYPE
margin屬性可任意拆分為左，右頁(yè)邊距設(shè)置自動(dòng)指定，結(jié)果都是出現(xiàn)居中元素：
實(shí)例
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
嘗試一下 ?提示: 如果寬度是 100％，對(duì)齊是沒(méi)有效果的。
注意：IE5 中塊元素有一個(gè) margin 處理 BUG。為了使上述例子能工作，在 IE5 中，需要添加一些額外的代碼。
實(shí)例
嘗試一下 ?
點(diǎn)擊“嘗試一下”按鈕查看在線實(shí)例
使用 position 屬性設(shè)置左，右對(duì)齊
元素對(duì)齊的方法之一是使用絕對(duì)定位：
實(shí)例
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
嘗試一下 ?注意：絕對(duì)定位與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其它元素。
使用 float 屬性設(shè)置左，右對(duì)齊
使用 float 屬性是對(duì)齊元素的方法之一：
實(shí)例
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
嘗試一下 ?
使用 Padding 設(shè)置垂直居中對(duì)齊
CSS 中一個(gè)簡(jiǎn)單的設(shè)置垂直居中對(duì)齊的方式就是頭部頂部使用 padding:
.center { padding: 70px 0; border: 3px solid green; }
如果要水平和垂直都居中，可以使用 padding 和 text-align: center:
.center { padding: 70px 0; border: 3px solid green; text-align: center; }
Crossbrowser 兼容性問(wèn)題
類(lèi)似這樣的元素對(duì)齊時(shí)，預(yù)先確定 margin 和元素的填充，始終是一個(gè)好主意。這是為了避免在不同的瀏覽器中的可視化差異。
IE8 和早期有一個(gè)問(wèn)題，當(dāng)使用 float 屬性時(shí)。如果一個(gè)容器元素（在本例中
）指定的寬度，!DOCTYPE 聲明缺失，IE8 和早期版本會(huì)在右邊增添 17px 的 margin。這似乎是一個(gè)滾動(dòng)的預(yù)留空間。使用 float 屬性始終設(shè)置在 DOCTYPE 聲明中！實(shí)例
body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
嘗試一下 ?
分享標(biāo)題：創(chuàng)新互聯(lián)CSS教程：CSS水平對(duì)齊(HorizontalAlign)
路徑分享：http://m.fisionsoft.com.cn/article/dpdicgh.html
