20170808- css 居中

Dongjie_Liu 發(fā)布于2019-08-29 13:07 / 2733人閱讀

摘要：擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關注和使用它注意上面的例子中必須為元素設置寬度，并且寬度必須小于父容器的寬度絕對定位實現垂直居中或者自身高度的一半

水平居中 行內或類行內元素水平居中

在塊級父容器中設置text-align:center

塊級元素水平居中

塊級元素設置margin-left和margin-right為auto（前提是已經為元素設置了width）

flex布局實現（多個水平排列元素）水平居中

display: flex;
justify-content: center;

flex布局實現（多個垂直排列元素）水平居中

display: flex;
flex-direction: column;
align-items: center;

絕對定位實現水平居中

width: 寬度值;
position: absolute;
left: 50%;
transform: translateX(-50%); 或者 margin-left: -寬度值的一半;

垂直居中 單行行內元素或單行類行內元素垂直居中

設置父容器的height和line-height為相同的值

height: 50px;
line-height: 50px;

使用table-cell多行文本垂直居中


  React 起源于 Facebook 的內部項目，用來架設 Instagram 的網站，并于 2013 年 5 月開源。React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關注和使用它

.container {
  width: 200px;
  height: 200px;
  border: 1px solid;
  display: table-cell;
  vertical-align: middle;
}

使用flex實現垂直居中

display: flex;
flex-direction: column;
justify-content: center;

或者

display: flex;
align-items: center;

利用偽元素實現垂直居中


  React 起源于 Facebook 的內部項目，用來架設 Instagram 的網站，并于 2013 年 5 月開源。React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關注和使用它

注意：上面的例子中必須為p元素設置寬度，并且寬度必須小于父容器的寬度

.container {
  width: 200px;
  height: 200px;
  border: 1px solid;
  text-align: center;
}
.container p {
  width: 190px;
  display: inline-block;
  vertical-align: middle;
}
.container:after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}

絕對定位實現垂直居中

position: absolute;
top: 50%;
transform: translateY(-50%); 或者 margin-top: -自身高度的一半;

GPU云服務器云服務器 html居中css 圖片居中上下居中圖標居中

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

轉載請注明本文地址：http://m.hztianpu.com/yun/112388.html

20170808 - 跨瀏覽器的事件兼容處理程序

摘要：第三個參數表示在冒泡階段調用事件處理程序，默認值為中的事件對象事件處理程序當前程序綁定的那個元素事件處理程序內部，的值始終等于的值事件發(fā)生的具體元素事件類型取消事件的默認行為取消事件的進一步捕獲或冒泡中的事件對象事件類型阻止事件進一步冒泡取 var EventUtil = { addHandler: function(element, type, handler){ if(...

1treeS 2019-08-20 18:36 評論0 收藏0
CSS居中完全指南——構建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

cc17 2019-08-02 10:11 評論0 收藏0
CSS居中完全指南——構建CSS居中決策樹

摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...

AlienZHOU 2019-08-30 15:53 評論0 收藏0
【前端】這可能是你看過最全的css居中解決方案了~

摘要：水平居中行內元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設置這個父級元素屬性即可現在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內元素解決方案適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

csRyan 2019-08-30 13:54 評論0 收藏0
【前端】這可能是你看過最全的css居中解決方案了~

摘要：水平居中行內元素解決方案適用元素文字，鏈接，及其其它或者類型元素，，部分代碼文字元素鏈接元素鏈接元素鏈接元素部分代碼解決方案將元素包裹在一個屬性為的父級元素中如設置這個父級元素屬性即可現在大家可以看到和中的子元素水平居中了水平居 1.水平居中：行內元素解決方案適用元素：文字，鏈接，及其其它inline或者inline-*類型元素（inline-block，inline-table，i...

Simon 2019-08-01 18:31 評論0 收藏0