欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

元素及文本的水平居中/垂直居中/絕對居中總結(jié)

  發(fā)布時(shí)間：2013-01-07 09:25:11   作者：佚名   我要評論
簡單總結(jié)一下html中元素的 水平居中、垂直居中、絕對居中的實(shí)現(xiàn)方式,感興趣的朋友可以了解下哦
一.層的橫向居中

復(fù)制代碼
代碼如下:

<style>
#div1{width:600px;height:600px;}
#div2{width:400px;height:200px;}
</style>
<divid="div1">
<divid="div_2">div2</div>
</div>

要讓div2在div1中橫向居中，解決辦法如下：
1.IE中，設(shè)置div1的樣式：text-align:center;該方法在IE8以上版本和firefox中僅適用于行內(nèi)元素居中（display:inline;和display:inline-block;及類似效果的元素以及文本，如inputimg等），子元素中的div、table等具有類似display:block效果元素將繼承這個(gè)樣式使文本居中,但是容器元素本身并不會(huì)居中。
2.IE7以上和firefox中，設(shè)置div2樣式：margin:auto;僅對具有類似display:block效果的元素生效，對display為inline、inline-block的元素不生效，一般用于div、table等位置定位的容器元素，margin樣式auto效果是橫向居中，并置頂。
3.div2不能是position:absolute;絕對定位將使瀏覽器無法對元素自動(dòng)排版，需依賴left、right屬性，除非明確設(shè)定left:0,right:0;
綜合以上：

復(fù)制代碼
代碼如下:

#div1{
*text-align:center;/*ie*/
}
#div2{
margin:auto;
display:block;
*display:inline;/*ie*/
*zoom:1;/*ie*/
}

二.層的垂直居中
1.最常見的就是表格元素的vertical-align:middle;和css中的vertical-align:middle;
css中的vertical-align:middle;與表格的vertical-align不太一樣，該樣式作用于inline-block(或具有類似行內(nèi)塊狀效果)的元素與其父元素內(nèi)的文本或祖先元素內(nèi)的文本（如果該祖先元素內(nèi)的inline-block元素沒有設(shè)置vertical-align樣式）在垂直方向的對齊方式。
vertical-align無法影響后代元素的內(nèi)容的對齊方式。
vertical-align對block元素不起作用，因?yàn)檎坌辛嗽诖怪狈较驔]有對齊可言。
vertical-align作用于inline元素(如span)時(shí)，將決定該元素自身如何對齊于同一行內(nèi)的inline-block元素，無法影響同輩元素或文本的對齊方式。
vertical-align取值為text-toptext-bottom時(shí)，對齊方式涉及文本的inline-box模型，
inline-box模型的高度由line-height(可以是繼承來的)決定，分為content-area、top、bottom幾個(gè)部分，其中的content-area是由文字大小決定，如果過line-height很大，font-size較小，加上背景顏色，我們就看到的背景色區(qū)域就是content-area，
text-top和text-bottom并不是可見的文字的頂端和底端（IE6-8在渲染text-top和text-bottom時(shí)，錯(cuò)誤地將content-area的頂端和底端作為對齊的基準(zhǔn)）。
具體的解釋參考這里：
http://www.dbjr.com.cn/css/70053.html
一個(gè)例子，firefo、chrome與IE有差別：

復(fù)制代碼
代碼如下:

<divstyle="line-height:200px;border:1pxsolid#34538b;">
<spanstyle="font-size:60px;border:1pxsolid#a0b3d6;vertical-align:text-top;">大大的文字</span>后面是靜止的文字。
</div>


復(fù)制代碼
代碼如下:

##==================test==================
document.body.innerHTML='<divid="conatiner"style="border:1pxsolidred;width:500px;height:300px;text-align:left;">aaaaaaaaa<divstyle="border:1pxsolidblue;display:inline-block;vertical-align:bottom;"><divstyle="border:1pxsolidgreen;width:300px;height:200px;text-align:center;display:inline-block;display:inline-block;display:inline-block;display:inline-block;*display:inline;*zoom:1;margin:auto;display:inline-block;">12313123123<inputtype="button"style="margin:auto;display:inline-block;height:40px;"value="click"><spanstyle="background:#aaeeff;height:40px;">helloworld</span></div>8888</div>bbbbbbbbbb</div>';
##====================================

2.如果不想用table元素實(shí)現(xiàn)垂直居中，在IE8以上版本和firefox中，display:table-cell;可以讓div以表格單元格的方式顯示，設(shè)置樣式為
#div2{display:table-cell;vertical-align:middle;}，但I(xiàn)E6中不支持display:table-cell;
3、如果是單行文本，為了兼容IE6，可以使設(shè)置行高與div的高度一致#div2{heigh:100px;line-height:100px;}
4、對于多行文本，如果包含文本的div高度不固定，為了兼容IE6可以使設(shè)置top和bottom的padding為相同的固定值，div隨文本內(nèi)容增加而自動(dòng)改變高度#div2{height:auto;padding:10px0px;}
三.絕對居中
1、利用百分比偏移和margin負(fù)值，該方法對所有元素生效，該方法兼容所有瀏覽器

復(fù)制代碼
代碼如下:

<style>
.div_1{
position:relative;
border:solid1pxred;
width:200px;
height:200px;
background-color:silver;
}
.content{
position:absolute;
top:50%;
left:50%;
width:50px;
height:50px;
margin-top:-25px;
margin-left:-25px;
/*或者margin:50%;top:-25px;left:-25px;*/
border:1pxsolidgreen;
}
</style>
<divclass="div_1">
<divclass="content">
Contenthere
</div>
</div>

2、利用絕對定位0偏移和margin:auto;，兩側(cè)偏移都被設(shè)置為0時(shí)，margin:auto將使內(nèi)容居中，該方法對所有元素生效，該方法不兼容低于IE8的瀏覽器

復(fù)制代碼
代碼如下:

<style>
.div_1{
position:relative;
border:solid1pxred;
width:200px;
height:200px;
background-color:silver;
}
.content{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
height:50px;
width:70%;
border:1pxsolidgreen;
}
</style>
<divclass="div_1">
<divclass="content">
Contenthere
</div>
</div>

3、利用50%偏移和負(fù)值偏移，支持所有瀏覽器

復(fù)制代碼
代碼如下:

<style>
.outer{
position:relative;
border:1pxsolidred;
width:400px;
height:300px;
}
.cellOuter{
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
border:0pxnone;
background:transparent;
}
.cellInner{
position:absolute;
top:-50%;
left:-50%;
width:100%;
height:100%;
border:1pxsolidgray;
}
</style>
<divclass="outer">
<divclass="cellOuter">
<divclass="cellInner">hellocell</div>
</div>
</div>

不使用table和不計(jì)算尺寸而且兼容IE6的垂直居中方法我沒發(fā)現(xiàn)，有知道的同學(xué)望賜教。
四.文本掙開div的問題
默認(rèn)情況下如果沒有設(shè)置塊狀元素的高寬，塊級(jí)元素寬度取最大值，高度取最小值。
IE6下，div內(nèi)的內(nèi)容(文本和元素)可以撐開div的高寬(定義了高寬的值)，IE7以上版本和firefox都不存在這個(gè)問題
IE7以上版本支持min-heightmax-height，min-widthmax-width，因此在IE7或firefox等較新的瀏覽器是用min-heightmin-width可以達(dá)到IE6下自動(dòng)撐大元素的效果。

相關(guān)文章

最新評論