首頁 > web前端 > css教學 > 主體

css的元素居中詳解

高洛峰
發布: 2017-03-07 14:03:06
原創
1759 人瀏覽過

水平居中

若為行內元素,對其父元素用text-align:center即可;

若為區塊元素(無浮動),則一般有兩種方法可實現對其的水平居中,一為margin:0 auto;二為透過css計算函數calc;

垂直居中

若為行內元素,一般對其父元素用line-height:{height}即可,若為圖片元素則需再對該元素使用vertical-align: middle;

另由可透過對錶格元素td使用vertical-align:middle可對其內的元素進行垂直居中可知,透過對父元素使用display:table-cell;vertical-align:middle;也可實現對元素的垂直居中,且該種方法無論行內元素或塊元素均可使用;

若為塊元素(行內元素使用此方法最終也會變成塊元素),則可透過position等一些屬性來實現元素的垂直居中,基本步驟為:1.設定父元素position:relative;2.設定元素position:absolute;top:50%;left:50%;3.設定元素margin-頂:-{height}/2;margin-left:-{width}/2;

#浮動元素的居中

##若為浮動的塊元素(如float:left),則需透過position等一些屬性來實現元素的水平垂直居中,基本步驟為:1.元素外層套一個p,且設定其樣式:float:left;overflow: hidden;display:inlineblock;2.將外層p position屬性設定為relative,且top、left值皆為50%;3.設定元素樣式:transform:translate(-50%, -50%);

以上這篇淺談css元素居中就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持PHP中文網。

更多css的元素居中詳解相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!