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