摘要:文章參考翻譯不當之處請諒解一水平居中內聯元素居中相對父級塊級元素居中對齊塊級元素居中設置和為讓它居中同時還要設置,否則它就會承滿整個容器,無法看出居中效果如果有很多塊級元素需要水平居中成一行,最好使用一個不同的類型。
文章參考:http://css-tricks.com/centering-css-complete-guide/?utm_source=ourjs.com(翻譯不當之處請諒解)
一、水平居中 1、內聯元素居中:相對父級塊級元素居中對齊1: .center-children { 2: text-align: center; 3: }2、塊級元素居中:設置margin-left和margin-right為auto讓它居中(同時還要設置width,否則它就會承滿整個容器,無法看出居中效果)
1: .center-me { 2: margin: 0 auto; 3: }
如果有很多塊級元素需要水平居中成一行,最好使用一個不同的display類型。這是一個使用inline-block和flex的例子。
演示地址:http://jsfiddle.net/Web_Code/5fvrwwk1/embedded/result/
1:2: 12:3: I"m an element that is block-like with my siblings and we"re centered in a row. 4:5:6: I"m an element that is block-like with my siblings and we"re centered in a row. I have more content in me than my siblings do. 7:8:9: I"m an element that is block-like with my siblings and we"re centered in a row. 10:11:13: 14: I"m an element that is block-like with my siblings and we"re centered in a row. 15:16:17: I"m an element that is block-like with my siblings and we"re centered in a row. I have more content in me than my siblings do. 18:19:20: I"m an element that is block-like with my siblings and we"re centered in a row. 21:22:
css:
1: body { 2: background: #f06d06; 3: font-size: 80%; 4: } 5: main { 6: background: white; 7: margin: 20px 0; 8: padding: 10px; 9: } 10: main div { 11: background: black; 12: color: white; 13: padding: 15px; 14: max-width: 125px; 15: margin: 5px; 16: } 17: .inline-block-center { 18: text-align: center; 19: } 20: .inline-block-center div { 21: display: inline-block; 22: text-align: left; 23: } 24: .flex-center { 25: display: flex; 26: justify-content: center; 27: }二、垂直居中 1、內聯元素:設置相等的上下padding,或者利用line-height
1: .link { 2: padding-top: 30px; 3: padding-bottom: 30px; 4: }
文本不會換行的情況下,可以使用line-height,讓其與height相等去對齊文本。
1: .center-text-trick { 2: height: 100px; 3: line-height: 100px; 4: white-space: nowrap; 5: }
多行的文本也可以利用上下等padding的方式也可以讓多行居中,但是如果這方法沒用,你可以讓這些文字的容器按table cell模式顯示,然后設置文字的vertical-align屬性對齊,
演示地址:http://jsfiddle.net/Web_Code/5fvrwwk1/1/embedded/result/
html:
1:
4: I"m vertically centered multiple lines of text in a real table cell. 5: | 6:
I"m vertically centered multiple lines of text in a CSS-created table layout.
10:css
1: body { 2: background: #f06d06; 3: font-size: 80%; 4: } 5: table { 6: background: white; 7: width: 240px; 8: border-collapse: separate; 9: margin: 20px; 10: height: 250px; 11: } 12: table td { 13: background: black; 14: color: white; 15: padding: 20px; 16: border: 10px solid white; 17: /* default is vertical-align: middle; */ 18: } 19: .center-table { 20: display: table; 21: height: 250px; 22: background: white; 23: width: 240px; 24: margin: 20px; 25: } 26: .center-table p { 27: display: table-cell; 28: margin: 0; 29: background: black; 30: color: white; 31: padding: 20px; 32: border: 10px solid white; 33: vertical-align: middle; 34: }2、塊級元素
若元素有固定高度,可以這樣垂直居中
1: .parent { 2: position: relative; 3: } 4: .child { 5: position: absolute; 6: top: 50%; 7: height: 100px; 8: margin-top: -50px; /* 如果沒有使用: border-box; 的盒子模型則需要設置這個 */ 9: }
如果不知道元素高度,則這樣
1: .parent { 2: position: relative; 3: } 4: .child { 5: position: absolute; 6: top: 50%; 7: transform: translateY(-50%); 8: }
也可以使用flexbox
1:三、同時水平和垂直居中 1、元素有固定高度和寬度:先絕對居中,然后上移和左移50%的寬度即可2: 1: body { 2: background: #f06d06; 3: font-size: 80%; 4: } 5: main { 6: background: white; 7: height: 300px; 8: width: 200px; 9: padding: 20px; 10: margin: 20px; 11: display: flex; 12: flex-direction: column; 13: justify-content: center; 14: resize: vertical; 15: overflow: auto; 16: } 17: main div { 18: background: black; 19: color: white; 20: padding: 20px; 21: resize: vertical; 22: overflow: auto; 23: }3: I"m a block-level element with an unknown height, centered vertically within my parent. 4:5:
1: //這種方案有極好的跨瀏覽器支持。 2: .parent { 3: position: relative; 4: } 5: .child { 6: width: 300px; 7: height: 100px; 8: padding: 20px; 9: position: absolute; 10: top: 50%; 11: left: 50%; 12: margin: -70px 0 0 -170px; 13: }2、元素的高度和寬度未知或可變的:使用transofrm屬性在兩個方向都平移負50%
1: .parent { 2: position: relative; 3: } 4: .child { 5: position: absolute; 6: top: 50%; 7: left: 50%; 8: transform: translate(-50%, -50%); 9: }
原文首發:http://www.ido321.com/824.html
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/110993.html
摘要:高度模型淺識為的簡寫,簡稱為塊級格式化上下文,為瀏覽器渲染某一區域的機制,中只有和中還增加了和。并非所有的布局都會在開發中使用,但是其中也會涉及一些知識點。然而在不同的純制作各種圖形純制作各種圖形多圖預警 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個問題:怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候,看到 float 屬性不...
摘要:與常人的直覺不符的是,實際上表示視口寬度的,而不是。與類似,表示視口高度的。存在問題它只適用于在視口中居中的場景基于的解決方案伸縮盒是專門針對這類需求所設計的。 相關基礎知識 1.內部與外部尺寸模型:(w3c草案)親測google可支持。(http://w3.org/TR/css3-sizing ) 基于原有CSS尺寸特性,可以使CSS更容易描述內容自適應以及適應固定上下文的盒模型: ...
摘要:總結常用垂直居中方法與方法實現居中這是比較常用的方法。絕對居中實現垂直居中這是一個兼容性比較好的能夠實現垂直居中的方法。 CSS—總結常用垂直居中方法 1、text-align與line-hight方法實現居中 這是比較常用的方法。通過line-hight來設置行間距是實現垂直居中的關鍵 .wrap{ width: 500px; heidth: 200px; l...
摘要:絕對底部前端掘金來自國外的設計達人,純,可以實現當正文內容很少時,底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人,純CSS,可以實現: 當正文內容很少時,底部位于窗口最下面。當改變窗口高度時,不會出現重疊問題。甚至,創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...
閱讀 2133·2023-04-26 03:06
閱讀 3580·2023-04-26 01:51
閱讀 2086·2021-11-24 09:38
閱讀 2452·2021-11-17 17:00
閱讀 2324·2021-09-28 09:36
閱讀 942·2021-09-24 09:47
閱讀 2587·2019-08-30 15:54
閱讀 1554·2019-08-30 15:44