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