CSS Tips------未知寬度高度居中對齊<三種最優解決方案>

alphahans 發布于2019-08-01 15:44 / 2064人閱讀

摘要：前言無論是還是移動端開發我們經常會遇到這樣一個問題父元素內包裹子元素而子元素的寬度是未知的如何讓子元素左右居中呢經過實戰演練及資料搜索感覺以下三種方法是最優的解決方案有需要的同學可以看看相互交流共同學習以下三種方案的主題結構如下子元素內容布

前言

無論是pc還是移動端開發,我們經常會遇到,這樣一個問題:父元素內包裹子元素,而子元素的寬度是未知的,如何讓子元素,左右居中呢?經過實戰演練,及資料搜索,感覺以下三種方法是最優的解決方案,有需要的同學可以看看,相互交流,共同學習.

0. 以下三種方案的主題html結構如下:

   
        
            子元素內容

1. flex布局

 第一種方案:使用CSS新特性,flex布局,這種流式布局方案在移動端上表現是非常棒的.將父元素display屬性設為flex,然后align-atem居中,子元素不需要設置,看起來非常簡單.

.parent{
  width:600px;
  height:300px;
  background:red;
  display:flex; 
  justify-content: center; 
  align-items: center; 
}
.child{
  background:green; 
}

2. 定位+transform

第二種方案是根據定位和transform屬性來實現的.首先子元素對父元素絕對定位,使得子元素左上角水平豎直居中,因為子元素是未知的寬和高,所以將margin按自身的50%,向上向左移動即可,使用transform的translate屬性完美解決.

.parent{
  width:600px;
  height:300px;
  background:red;
  position:relative; 
}
.child{
  background:green;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

3. text-align+inline-block

第三種方案是根據inline-block的屬性來實現的,對于該水平居中方法可能不需要太多的介紹，所有主流瀏覽器均支持 text-align 屬性，只需要取值 center 即可；代碼比較簡單,但是對于inline-block造成的間距問題對復雜布局會有影響.

.parent{
 width:600px;
  height:300px;
  background:red;
  text-align:center; 
}
.child{
  background:green;  
  display:inline-block;
}

其實還有一些使用浮動的方案,以及display:table的方案也是可以實現的,只是個人覺得上述三種方法還是應用比較多的,前端開發的過程,兼容性問題是繞不過去的坎,多總結總結找到自己的解決方案才是最重要的.

云服務器 GPU云服務器未知高度 CSS_JS_Tips 寬度高度 python &lt&gt

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50077.html

CSS Tips------未知寬度高度居中對齊<三種最優解決方案>

摘要：前言無論是還是移動端開發我們經常會遇到這樣一個問題父元素內包裹子元素而子元素的寬度是未知的如何讓子元素左右居中呢經過實戰演練及資料搜索感覺以下三種方法是最優的解決方案有需要的同學可以看看相互交流共同學習以下三種方案的主題結構如下子元素內容布前言無論是pc還是移動端開發,我們經常會遇到,這樣一個問題:父元素內包裹子元素,而子元素的寬度是未知的,如何讓子元素,左右居中呢?經過實戰演練,...

big_cat 2019-08-29 11:19 評論0 收藏0
CSS Tips------未知寬度高度居中對齊<三種最優解決方案>

摘要：前言無論是還是移動端開發我們經常會遇到這樣一個問題父元素內包裹子元素而子元素的寬度是未知的如何讓子元素左右居中呢經過實戰演練及資料搜索感覺以下三種方法是最優的解決方案有需要的同學可以看看相互交流共同學習以下三種方案的主題結構如下子元素內容布前言無論是pc還是移動端開發,我們經常會遇到,這樣一個問題:父元素內包裹子元素,而子元素的寬度是未知的,如何讓子元素,左右居中呢?經過實戰演練,...

selfimpr 2019-08-20 11:07 評論0 收藏0
前端基礎-CSS的屬性相關設置

摘要：值描述左邊對齊默認值右對齊居中對齊兩端對齊文本裝飾為重點值描述默認。繼承父元素的屬性的值。具體的像素一定要加單位例如，等等第一個值是水平位置，第二個值是垂直位置。單位是像素或任何其他的單位。一字體屬性二文本屬性三背景屬性四盒子模型五盒子模型各部分詳解一、字體屬性1、font-weight：文字粗細（表格中*為重點）取值描述normal默認值，標準粗細bord粗體 *border...

番茄西紅柿 2019-04-23 13:41 評論0 收藏0
HTML、CSS知識學習與整理

摘要：命名規范類型對象如。常量命名方式全部大寫。子容器在交叉軸的排列方向。交叉軸的起點對齊交叉軸的終點對齊交叉軸的中點對齊交叉軸的兩端對齊，軸線間隔平均分布軸線兩側間隔相等默認值，軸線占滿整個交叉軸。命名1.駝峰式命名法：(1) 大駝峰命名法：首字母大寫。(2) 小駝峰命名法：首字母小寫。2.文件資源命名：(1) 不得含有空格。(2) 建議只使用小寫字母，除了某些為說明文件的情況（如 README...

pcChao 2019-08-29 15:18 評論0 收藏0