MySQL——修正root暗碼的4種辦法(以windows為例)。本站提示廣大學習愛好者:(MySQL——修正root暗碼的4種辦法(以windows為例))文章只能為提供參考,不一定能成為您想要的結果。以下是MySQL——修正root暗碼的4種辦法(以windows為例)正文
一.層的橫向居中
<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中,設置div1的款式:text-align:center; 該辦法在IE8以上版本和firefox中僅實用於行內元素居中(display:inline; 和 display:inline-block; 及相似後果的元素和文本,如 input img 等 ),子元素中的 div、table 等 具有相似 display:block 後果元素將繼續這個款式使文本居中 ,然則容器元素自己其實不會居中。
2.IE7 以 上和 firefox 中,設置div2款式:margin: auto; 僅對具有相似 display:block 後果的元素失效,對 display 為 inline、inline-block 的元素不失效,普通用於 div、table 等地位定位的容器元素, margin 樣 式 auto 後果是橫向居中,並置頂。
3. div2 不克不及是 position:absolute; 相對定位將使閱讀器沒法對元素主動排版,需依附 left、right 屬性,除非明白設定 left:0,right:0;
綜合以上:
#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(或具有相似行內塊狀後果) 的元素與其父元素內的文本或先人元素內的文本(假如該先人元素內的inline-block 元素沒有設置 vertical- align 款式)在垂直偏向的對齊方法。
vertical-align 沒法影響子女元素的內容的對齊方法。
vertical-align 對 block 元素不起感化,由於折行了在垂直偏向沒有對齊可言。
vertical-align 感化於 inline元素(如 span)時,將決議該元素本身若何對齊於統一行內的 inline-block 元素,沒法影響平輩元素或文本的對齊方法。
vertical-align 取 值為 text-top text-bottom 時, 對齊方法觸及文本的 inline-box 模子,
inline-box 模子的高度 由 line-height(可所以繼續來的) 決議,分為 content-area、top、bottom幾個部門,個中的 content- area 是由文字年夜小決議,假如過 line-height 很年夜, font-size 較小,加上配景色彩,我們就看到的配景色區域就 是 content-area,
text-top 和 text-bottom 其實不是可見的文字的頂端和底端(IE6-8 在襯著 text- top 和text-bottom時, 毛病地將content-area 的頂端和底端作為對齊的基准)。
詳細的說明參考這裡:
http://www.jb51.net/css/70053.html
一個例子,firefo、chrome 與IE 有差異:
<div >
<span >年夜年夜的文字</span>前面是運動的文字。
</div>
##================== test ==================
document.body.innerHTML = '<div id="conatiner" >aaaaaaaaa<div ><div >12313123123<input type="button" value="click"><span >hello world</span></div>8888</div>bbbbbbbbbb</div>';
##====================================
2.假如不想用table元素完成垂直居中,在IE8以上版本和firefox中,display: table-cell; 可讓div以表格單位格的方法顯示,設置款式為
#div2{display: table-cell; vertical-align: middle; } ,但IE6中不支撐display: table-cell;
3、假如是單行文本,為了兼容IE6,可使設置行高與div的高度分歧 #div2{heigh:100px;line-height:100px;}
4、關於多行文本,假如包括文本的div高度不固定,為了兼容IE6可使設置top和bottom的padding為雷同的固定值,div隨文本內容增長而主動轉變高度 #div2{height:auto; padding:10px 0px;}
5、異樣,須要劇中的元素假如 position:absolute; 須要明白設置 top、bottom 為0 能力使閱讀器對其完成主動排版,是以應用 vertical-align 排版的元素最好不要設置 position:absolute
三.相對居中
1、應用百分比偏移和margin負值,該辦法對一切元素失效,該辦法兼容一切閱讀器
<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、應用相對定位 0 偏移 和 margin:auto; ,兩側偏移都被設置為0時,margin:auto 將使內容居中,該辦法對一切元素失效,該辦法不兼容低於 IE8 的閱讀器
<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% 偏移 和負值偏移,支撐一切閱讀器
<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 和 不盤算尺寸並且兼容 IE6 的垂直居中辦法我沒發明,有曉得的同窗望賜教。
四.文本掙開div的成績
默許情形下假如沒有設置塊狀元素的高寬,塊級元素寬度取最年夜值,高度取最小值。
IE6下,div內的內容(文本和元素)可以撐開 div 的高寬(界說了高寬的值),IE7以上版本和firefox都不存在這個成績
IE7以上版本支撐 min-height max-height ,min-width max-width,是以在IE7 或 firefox 等較新的閱讀器是用 min-height min-width 可以到達IE6下主動撐年夜元素的後果。