關于垂直居中

前端7班 陸恩澤
在網頁布局中,我們經常需要對div區塊,文本和圖片進行垂直居中,以便達到美觀的效果。上一次直播課中也講到了這一個知識點。所以我講具體的方法做一下整理。

文本垂直居中

有兩種方法,(1)另行高line-height等于外層容器高度height; (2)上下padding設置相等。

圖像垂直居中

方法一

display:table-cell;
vertical-align:middle;

方法二:在內層容器內加一個空元素.

.item2:before{ content: ''; display:inline-block; height: 100%; vertical-align: middle;}.item2 img{ vertical-align: middle;}

div區塊居中

div{
margin:0 auto;
}

回來有點,先就這么多哈!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 垂直居中,是前端的基本操作,我主要在兩種情況下進行簡單的實現。分別為: 已知高度(指自身高度) 未知高度簡單的ht...
    Hunter_Gu閱讀 162評論 0 0
  • 這幾天一直在鼓搗Ubuntu,進度有點落下了....哈哈。我終于可以在ubuntu里上b站了(就是不支持獨顯---...
    知更鳥_b4d4閱讀 239評論 0 0
  • 垂直居中我們經常到會處理這種問題,但是對于各種不同的情況,自己是否又能夠解決的得心應手呢?? line-heigh...
    fzhange閱讀 282評論 0 0
  • 書接上文,本次我們來談談怎樣根據需求來做到合適的垂直居中。 1.文字居中-line-height; 在文字垂直居中...
    早安馬丁閱讀 551評論 0 0
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,815評論 1 92