1.恒鑫創(chuàng)想iweb學(xué)院、html5培訓(xùn)始終堅(jiān)持高品質(zhì)，恒鑫創(chuàng)想iweb學(xué)院始終堅(jiān)持客戶優(yōu)先。恒鑫創(chuàng)想十分注重iweb學(xué)院核心技術(shù)的積累，公司iweb學(xué)院已經(jīng)擁有自有知識(shí)產(chǎn)權(quán)。
2.詳細(xì)說明：北京web前端培訓(xùn) CSS布局——居中
1.行內(nèi)元素水平居中text-align:center
對(duì)圖片，按鈕，文字等行內(nèi)元素(display為inline或inline-block等)進(jìn)行水平居中，可對(duì)元素或者父元素使用text-align:center
2.定寬塊級(jí)元素水平居中margin: 0 auto;
3.使用表格垂直水平居中
如果你使用的是表格的話，那完全不用為各種居中問題而煩惱了，只要用到 td(也可能會(huì)用到 th)元素的 align="center" 以及 valign="middle" 這兩個(gè)屬性就可以完美的處理它里面內(nèi)容x195ae7n的水平和垂直居中問題了,而且表格默認(rèn)的就會(huì)對(duì)它里面的內(nèi)容進(jìn)行垂直居中。如果想在css中控制表格內(nèi)容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中是沒有相對(duì)應(yīng)的屬性的,但是在IE6、7中我們可以使用text-align:center來對(duì)表格里的元素進(jìn)行水平居中，IE8+以及谷歌、火狐等瀏覽器的text-align:center只對(duì)行內(nèi)元素起作用，對(duì)塊狀元素?zé)o效，需要設(shè)置display。
4.使用display:table;margin:0 auto;水平居中
5.使用display:table-cell垂直水平居中
對(duì)于那些不是表格的元素，我們可以通過display:table-cell 來把它模擬成一個(gè)表格單元格，這樣就可以利用表格的居中特性。但是，這種方法只能在IE8+、谷歌、火狐等瀏覽器上使用，IE6、IE7都無效。
6.單行或多行文本的垂直居中
父元素高度確定的情況下，
單行文本設(shè)置父元素的height和line-height一致即可；
多行文本在使用vertical-align:middle的時(shí)候，由于對(duì)齊的基線是用行高的基線作為標(biāo)記，故需要設(shè)置line-height或設(shè)置display:table-cell;
7.定位垂直水平居中
此法只適用于那些我們已經(jīng)知道它們的寬度或高度的元素。
定位進(jìn)行居中的原理是通過把這個(gè)定位元素的lef |
 |
|
手機(jī)站
您當(dāng)前位置是：商業(yè)機(jī)會(huì) >> 商務(wù)服務(wù) >> 其他教育培訓(xùn) >> 浙江省恒鑫創(chuàng)想是一家專業(yè)從事iweb學(xué)院、html5培訓(xùn)機(jī)構(gòu)生產(chǎn)與銷售的
聯(lián)系信息