摘要:如果要居中的塊級元素直接是內聯元素等,直接在其父級元素上加上屬性即可圖片之間,瀏覽器會產生默認的間距,父元素設置可以很好地解決這個問題。使用水平居中前提居中的元素必須是塊級元素,如果是內聯元素,需要添加屬性而且元素不浮動。
前端開發中,我們經常需要對元素進行水平垂直居中。為此,小編特地總結了讓元素居中的方法。水平居中text-align:center;
這個是沒有浮動的情況下,我們可以先將要居中的塊級元素設為inline/inline-block,然后在其父元素上加上屬性text-align:center;即可。如果要居中的塊級元素直接是內聯元素(span、img、a等),直接在其父級元素上加上屬性text-align:center;即可;
.way { border: 1px solid red; width: 250px; } .way img { max-width: 200px; } .way1 { text-align: center; font-size: 0px; //HTML圖片之間,瀏覽器會產生默認的間距,父元素設置font-size:0px;可以很好地解決這個問題。 }使用margin:0 auto;水平居中
前提:居中的元素必須是塊級元素,如果是內聯元素,需要添加屬性display:block;而且元素不浮動。
.way2 img { display: block; margin: 0 auto; }定位實現居中(需計算偏移值)
前提:必須知道設置要居中元素的寬高
.way3 { position: relative; width: 250px; height: 250px; } .way3 img { width: 200px; height: 140px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -70px; }定位實現居中(不需計算偏移值,margin:auto;和四個方向定位搭配使用)
這種方法的好處是不需要知道元素的寬高,而且瀏覽器的兼容性好。
.way4 { position: relative; width: 250px; height: 250px; } .way4 img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; }定位配合css3新屬性transform:translate(x,y)使用
該方法的優點是不需要知道元素的寬度和高度,在移動端用的比較多,因為移動端對css3新屬性的兼容性比較好。
.way5 { position: relative; width: 250px; height: 250px; } .way5 img { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }css3新屬性calc()和定位配合使用(需要知道元素的寬高)
用于動態計算長度值。
需要注意的是,運算符前后都需要保留一個空格,例如:width: calc(100% - 10px);
任何長度值都可以使用calc()函數進行計算;
calc()函數支持 "+", "-", "*", "/" 運算;
calc()函數使用標準的數學運算優先級規則;
.way6 { position: relative; width: 250px; height: 250px; } .way6 img { width: 200px; height: 140px; position: absolute; left: calc(50% - 100px); top: calc(50% - 70px); }jquery實現水平垂直居中
jquery實現水平和垂直劇中的原理是通過jquery設置div的css,獲取div的左,上的邊距偏移量,邊距偏移量的算法就是用頁面窗口的寬度減去該div的寬度,得到的值再除以2即左偏移量,右偏移量算法相同。注意div的css設置要在resize()方法中完成,就是每次改變窗口大小是,都要執行設置div的css,代碼如下:
$(function(){ $(window).resize(function(){ $(".mydiv").css({ position:"absolute", left:($(window).width()-$(".mydiv").outerWidth())/2, top:($(window).height()-$(".mydiv").outerHeight())/2 }); }); })
此方法的好處就是不需要知道div 的具體寬度和高度,直接用jquery就可以實現水平和垂直居中,并且兼容各種瀏覽器。這個方法在很多的彈出層效果中應用。
使用彈性布局flex居中使用flex居中不需要知道元素本身寬高以及元素的屬性。
.way7 { width: 250px; height: 250px; display: flex; justify-content: center;/*水平居中*/ align-items: center;/*垂直居中*/ }使用display:table-cell;居中
組合使用display:table-cell和vertical-align、text-align,使父元素內的所有行內元素水平垂直居中(內部div設置display:inline-block即可)。這在子元素不確定寬高和數量時,特別實用!
.way8 { display: table-cell; width: 250px; height: 250px; text-align: center; vertical-align: middle; float: none; } .way8 img { display: inline-block; }
特別提醒:
1.table-cell不感知margin,在父元素上設置table-row等屬性,也會使其不感知height。
2.設置float或position會對默認布局造成破壞,可以考慮為之增加一個父div定義float等屬性。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/53288.html
摘要:如果要居中的塊級元素直接是內聯元素等,直接在其父級元素上加上屬性即可圖片之間,瀏覽器會產生默認的間距,父元素設置可以很好地解決這個問題。使用水平居中前提居中的元素必須是塊級元素,如果是內聯元素,需要添加屬性而且元素不浮動。 前端開發中,我們經常需要對元素進行水平垂直居中。為此,小編特地總結了讓元素居中的方法。 showImg(https://segmentfault.com/img/b...
摘要:高度模型淺識為的簡寫,簡稱為塊級格式化上下文,為瀏覽器渲染某一區域的機制,中只有和中還增加了和。并非所有的布局都會在開發中使用,但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題:怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候,看到 float 屬性不...
摘要:前言總括居中一直是一個比較敏感的話題,為了以后開發的方便,樓主覺得確實需要總結一下了,總的來說,居中問題分為垂直居中和水平居中,實際上水平居中是很簡單的,但垂直居中的方式和方法就千奇百怪了。 前言 總括: CSS居中一直是一個比較敏感的話題,為了以后開發的方便,樓主覺得確實需要總結一下了,總的來說,居中問題分為垂直居中和水平居中,實際上水平居中是很簡單的,但垂直居中的方式和方法就千奇...
閱讀 3114·2021-11-23 09:51
閱讀 1973·2021-09-09 09:32
閱讀 1084·2019-08-30 15:53
閱讀 2957·2019-08-30 11:19
閱讀 2464·2019-08-29 14:15
閱讀 1432·2019-08-29 13:52
閱讀 553·2019-08-29 12:46
閱讀 2818·2019-08-26 12:18