資訊專欄INFORMATION COLUMN
第一種垂直居中方法
利用vertical-align：middle進(jìn)行垂直方向上的居中對(duì)齊，此方法需要滿足的條件：
設(shè)置父元素的行高line-height等于父元素height的高度
子元素必須是行內(nèi)塊級(jí)元素display:inline-block;
子元素設(shè)置vertical-align：middle
此方法在開(kāi)發(fā)中不能右浮動(dòng)(不能靠右邊)
下方是完整代碼，可以新建一個(gè)HTML文件進(jìn)行測(cè)試(綠色的盒子)：
導(dǎo)航條 xxxxxxxxxxx
第一種方法結(jié)束。
第二種垂直居中方法這種方法比較暴力，利用定位解決：
父元素開(kāi)啟相對(duì)定位
子元素絕對(duì)定位
子元素先向下移動(dòng)父元素的50%，此時(shí)子元素的頂部與父元素的中線對(duì)齊了
子元素再向上移動(dòng)自身高度"height"的一半，此時(shí)子元素的中線和父元素的中線對(duì)齊了
此方法可以右對(duì)齊，設(shè)置子元素right：0px;即可
下方是完整代碼，可以新建一個(gè)HTML文件進(jìn)行測(cè)試(綠色的盒子)：
導(dǎo)航條
第二種方法結(jié)束。
總結(jié)上面兩種方法的特點(diǎn)都是讓子元素的中線和父元素的中線對(duì)齊。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114556.html
第一種垂直居中方法 利用vertical-align：middle進(jìn)行垂直方向上的居中對(duì)齊，此方法需要滿足的條件： 設(shè)置父元素的行高line-height等于父元素height的高度 子元素必須是行內(nèi)塊級(jí)元素display:inline-block; 子元素設(shè)置vertical-align：middle 此方法在開(kāi)發(fā)中不能右浮動(dòng)(不能靠右邊) 下方是完整代碼，可以新建一個(gè)HTML文件進(jìn)行測(cè)...
摘要：在開(kāi)發(fā)中經(jīng)常遇到這個(gè)問(wèn)題，即讓某個(gè)元素的內(nèi)容在水平和垂直方向上都居中，內(nèi)容不僅限于文字，可能是圖片或其他元素。這篇文章就來(lái)總結(jié)一下都有哪些方法可以實(shí)現(xiàn)水平和垂直都居中。表示這些元素將相對(duì)于本容器水平居中，也是同樣的道理垂直居中。 在開(kāi)發(fā)中經(jīng)常遇到這個(gè)問(wèn)題，即讓某個(gè)元素的內(nèi)容在水平和垂直方向上都居中，內(nèi)容不僅限于文字，可能是圖片或其他元素。而且我們希望不要涉及寬度和高度，也就是說(shuō)，我們不...
摘要：想寫(xiě)出高效合理的布局，必須以深厚的基礎(chǔ)為前提。現(xiàn)在布局方式主要分為三種傳統(tǒng)布局方案等配合。彈性布局，實(shí)現(xiàn)方便，兼容性較好。在環(huán)境中的元素按照如下規(guī)則渲染和文檔流一樣，元素按照自己類型的布局特性從左到右，從上往下依次排列。 前端css布局知識(shí)繁雜，實(shí)現(xiàn)方式多種多樣。想寫(xiě)出高效、合理的布局，必須以深厚的css基礎(chǔ)為前提。為了方便記憶和復(fù)習(xí)，將css布局要點(diǎn)記錄如下。內(nèi)容較多，應(yīng)用方面說(shuō)的不...
閱讀 2143·2021-10-14 09:43
閱讀 2203·2019-08-30 15:55
閱讀 735·2019-08-30 14:23
閱讀 2028·2019-08-30 13:21
閱讀 1244·2019-08-30 12:50
閱讀 2207·2019-08-29 18:46
閱讀 2289·2019-08-29 17:28
閱讀 2373·2019-08-29 17:21
