web開發(fā)常用的幾種居中形式

zqhxuyuan 發(fā)布于2019-08-21 16:23 / 1750人閱讀

摘要：一水平居中二水平垂直居中三針對文本內(nèi)容的垂直居中一水平居中要居中的元素有屬性給元素添加代碼演示此外，和產(chǎn)生同樣效果的原因移步要居中的元素沒有屬性給添加屬性，并在的外面包一層且添加是讓塊狀里面的元素比如文字居中。

一水平居中
二水平垂直居中
三針對文本內(nèi)容的垂直居中

一水平居中

要居中的元素A有width屬性

給元素A添加 margin：0,auto；(代碼演示)

ps: 此外，margin: auto;和margin:0 auto;產(chǎn)生同樣效果的原因移步

要居中的元素B沒有width屬性

給B添加display:inline-block屬性，并在B的外面包一層div且添加text-align:center;

ps：text-align:center是讓塊狀里面的元素（比如文字）居中。

要居中的元素C 是絕對定位的也就是其position為absolute

給C添加margin: auto; top:0; left:0; right:0; bottom:0;以及width和height屬性，并確保C的外層父元素position: relative;

ps:

設置top,left,bottom,right 屬性把元素充滿了容器，同時自身指定了寬度，總寬度（固定） = width（固定） + margin-left + margin-right;

當margin設置為auto的時候，左右邊距會平分，元素自然就居中了(且是水平垂直居中)

二水平垂直居中： 要居中的元素C沒有width屬性及height屬性

給C的外層父元素添加display: flex; align-items: center; justify-content: center; 屬性(注意瀏覽器的兼容性)

給C添加margin: auto; 并且確保C的外層父元素 display: flex; (注意瀏覽器兼容性)

ps: flexBox的知識請移步阮一峰大神的博客

針對文本內(nèi)容的垂直居中:

父元素有width和height屬性以及text-align: center; 同時給要居中的元素D添加line-height為父元素的height值

ps: line-height 垂直居中原理請移步

all.

by 潘小閑

GPU云服務器云服務器最基本的幾種 html的幾種輪播 js的幾種數(shù)據(jù)類型 js緩存的幾種方法

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/88476.html

web開發(fā)常用的幾種居中形式

摘要：一水平居中二水平垂直居中三針對文本內(nèi)容的垂直居中一水平居中要居中的元素有屬性給元素添加代碼演示此外，和產(chǎn)生同樣效果的原因移步要居中的元素沒有屬性給添加屬性，并在的外面包一層且添加是讓塊狀里面的元素比如文字居中。一水平居中二水平垂直居中三針對文本內(nèi)容的垂直居中一水平居中要居中的元素A有width屬性給元素A添加 margin：0,auto；(代碼演示) showImg(h...

brianway 2019-08-29 13:23 評論0 收藏0
未知寬度水平居中的幾種方法

摘要：在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時間在寫分頁的時候碰到了這個問題。但即使我們沒有設置的寬度直接設置的外邊距就可以實現(xiàn)水平居中了這樣我們就可以通過設置水平居中間接使里面的內(nèi)容居中。轉(zhuǎn)自未知寬度水平居中的幾種方法在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時間在寫分頁的時候碰到了這個問題。當時在網(wǎng)上找了一些解決方法，并選了一個最合適的方法，現(xiàn)將...

raledong 2019-08-28 18:05 評論0 收藏0
未知寬度水平居中的幾種方法

摘要：在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時間在寫分頁的時候碰到了這個問題。但即使我們沒有設置的寬度直接設置的外邊距就可以實現(xiàn)水平居中了這樣我們就可以通過設置水平居中間接使里面的內(nèi)容居中。轉(zhuǎn)自未知寬度水平居中的幾種方法在某些特定的場合，在沒有知道寬度的情況下卻要求水平居中，前段時間在寫分頁的時候碰到了這個問題。當時在網(wǎng)上找了一些解決方法，并選了一個最合適的方法，現(xiàn)將...

shenhualong 2019-08-01 14:46 評論0 收藏0
html的幾種水平垂直居中的方式（基礎）

摘要：前言我們在編寫馬過程中，想必大家對水平垂直居中的方法了解并不多。所以我給大家總結(jié)式的列出幾種常用的水平垂直居中的方法。前言我們在編寫馬過程中，想必大家對水平垂直居中的方法了解并不多。所以我給大家總結(jié)式的列出幾種常用的水平垂直居中的方法。第一種方法 d第一種 .Centered1{ background-color: #800...

Songlcy 2019-08-30 15:44 評論0 收藏0
面試常見問題——垂直居中的幾種方法

摘要：前幾天面試，被問到兩次，沒答好，找到這篇文章收藏學習一下，來自這里做手機的頁面，經(jīng)常會遇到需要垂直居中的情況，這里把常用的垂直居中的幾種方法整理下。（前幾天面試，被問到兩次，沒答好，找到這篇文章收藏學習一下，來自這里）做手機的頁面，經(jīng)常會遇到需要垂直居中的情況，這里把常用的垂直居中的幾種方法整理下。結(jié)構(gòu) 我是垂直居中元素方法1：dispaly:table-cel...

Prasanta 2019-08-28 18:05 評論0 收藏0