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

元素及文本的居中(層的橫向居中/層的垂直居中/絕對(duì)居中)

  發(fā)布時(shí)間：2013-01-18 16:59:30   作者：佚名   我要評(píng)論
元素及文本的居中包括(層的橫向居中/層的垂直居中/絕對(duì)居中)以及文本掙開(kāi)div的題，也在這里給予了解決方法，感興趣的朋友可以了解下啊，希望本文可以幫助到你
一.層的橫向居中

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

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

要讓div2在div1中橫向居中，解決辦法如下：
1.IE中，設(shè)置div1的樣式：text-align:center; 該方法在IE8以上版本和firefox中僅適用于行內(nèi)元素居中（display:inline; 和 display:inline-block; 及類(lèi)似效果的元素以及文本，如 input img 等 ），子元素中的 div、table 等 具有類(lèi)似 display:block 效果元素將繼承這個(gè)樣式使文本居中 ,但是容器元素本身并不會(huì)居中。
2.IE7 以 上和 firefox 中，設(shè)置div2樣式：margin: auto; 僅對(duì)具有類(lèi)似 display:block 效果的元素生效，對(duì) display 為 inline、inline-block 的元素不生效，一般用于 div、table 等位置定位的容器元素， margin 樣 式 auto 效果是橫向居中，并置頂。
3. div2 不能是 position:absolute; 絕對(duì)定位將使瀏覽器無(wú)法對(duì)元素自動(dòng)排版，需依賴(lài) 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.最常見(jiàn)的就是表格元素的 vertical-align:middle; 和 css中的 vertical-align:middle;
css 中的 vertical-align:middle;與表格的 vertical-align 不太一樣， 該樣式作用于 inline-block(或具有類(lèi)似行內(nèi)塊狀效果) 的元素與其父元素內(nèi)的文本或祖先元素內(nèi)的文本（如果該祖先元素內(nèi)的inline-block 元素沒(méi)有設(shè)置 vertical- align 樣式）在垂直方向的對(duì)齊方式。
vertical-align 無(wú)法影響后代元素的內(nèi)容的對(duì)齊方式。
vertical-align 對(duì) block 元素不起作用，因?yàn)檎坌辛嗽诖怪狈较驔](méi)有對(duì)齊可言。
vertical-align 作用于 inline元素(如 span)時(shí)，將決定該元素自身如何對(duì)齊于同一行內(nèi)的 inline-block 元素，無(wú)法影響同輩元素或文本的對(duì)齊方式。
vertical-align 取 值為 text-top text-bottom 時(shí)， 對(duì)齊方式涉及文本的 inline-box 模型，
inline-box 模型的高度 由 line-height(可以是繼承來(lái)的) 決定，分為 content-area、top、bottom幾個(gè)部分，其中的 content- area 是由文字大小決定，如果過(guò) line-height 很大， font-size 較小，加上背景顏色，我們就看到的背景色區(qū)域就 是 content-area，
text-top 和 text-bottom 并不是可見(jiàn)的文字的頂端和底端（IE6-8 在渲染 text- top 和text-bottom時(shí)， 錯(cuò)誤地將content-area 的頂端和底端作為對(duì)齊的基準(zhǔn)）。
具體的解釋參考這里：
http://www.dbjr.com.cn/css/70053.html
一個(gè)例子，firefo、chrome 與IE 有差別：

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

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


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

##================== test ==================
document.body.innerHTML = '<div id="conatiner" style="border: 1px solid red; width: 500px; height: 300px; text-align: left;">aaaaaaaaa<div style="border:1px solid blue;display:inline-block; vertical-align: bottom;"><div style="border: 1px solid green; 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<input type="button" style="margin:auto;display:inline-block;height: 40px;" value="click"><span style="background:#aaeeff;height: 40px;">hello world</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、對(duì)于多行文本，如果包含文本的div高度不固定，為了兼容IE6可以使設(shè)置top和bottom的padding為相同的固定值，div隨文本內(nèi)容增加而自動(dòng)改變高度 #div2{height:auto; padding:10px 0px;}
5、同樣，需要?jiǎng)≈械脑厝绻?position:absolute; 需要明確設(shè)置 top、bottom 為0 才能使瀏覽器對(duì)其實(shí)現(xiàn)自動(dòng)排版，因此使用 vertical-align 排版的元素最好不要設(shè)置 position:absolute
三.絕對(duì)居中
1、利用百分比偏移和margin負(fù)值，該方法對(duì)所有元素生效，該方法兼容所有瀏覽器

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

<style>
.div_1{
position:relative;
border: solid 1px red;
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:1px solid green;
}
</style>
<div class="div_1">
<div class="content">
Content here
</div>
</div>

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

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

<style>
.div_1{
position:relative;
border: solid 1px red;
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:1px solid green;
}
</style>
<div class="div_1">
<div class="content">
Content here
</div>
</div>

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

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

<style>
.outer{
position:relative;
border:1px solid red;
width:400px;
height:300px;
}
.cellOuter{
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
border:0px none;
background:transparent;
}
.cellInner{
position:absolute;
top:-50%;
left:-50%;
width:100%;
height:100%;
border:1px solid gray;
}
</style>
<div class="outer">
<div class="cellOuter">
<div class="cellInner">hello cell</div>
</div>
</div>

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

相關(guān)文章

最新評(píng)論