html - text垂直居中 - vertical-align無效




與Bootstrap 3垂直對齊 (15)

這個答案提出了一個黑客,但我強烈建議你使用flexbox(如@Haschem答案中所述 ),因為它現在到處都支持。

演示鏈接:
- Bootstrap 3
- Bootstrap 4 alpha 6

您在需要時仍可以使用自定義類:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
<div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Bootply

如果您在代碼中放置真實空間(如...</div> </div>... ),則使用inline-block會在塊之間添加額外的空間。 如果列大小合計為12,這個額外的空間會打破我們的網格:

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

在這裡,我們在<div class="[...] col-lg-2"><div class="[...] col-lg-10"> (回車符和2標籤/ 8個空格)。 所以...

讓我們踢這個額外的空間!

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

注意看似無用的評論<!-- ... --> ? 它們非常重要 - 沒有它們, <div>元素之間的空白將佔用佈局空間,打破網格系統。

注意:Bootply已經更新

我正在使用Twitter Bootstrap 3,並且當我想垂直對齊兩個div時遇到問題 - 例如 - JSFiddle鏈接

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

Bootstrap中的網格系統使用float: left ,而不是display:inline-block ,所以屬性vertical-align不起作用。 我嘗試使用margin-top來修復它,但我認為這不是響應式設計的一個好解決方案。


靈活的箱子佈局

隨著CSS Flexible Box的問世,許多網頁設計師的噩夢1已經解決。 其中一個最hacky,垂直對齊。 現在甚至可能在未知的高度

“二十年的佈局黑客即將結束,也許不是明天,而是很快,而且還有我們的餘生。”

- 在W3Conf 2013的 CSS傳奇Eric Meyer

柔性盒(或簡稱為Flexbox)是專為佈局而設計的新版式系統。 該規範指出

Flex佈局與塊佈局表面相似。 它缺少許多可以在塊佈局中使用的更複雜的以文本或文檔為中心的屬性,例如浮動和列。 作為回報,它可以獲得簡單而強大的工具來分發空間並以web應用程序和復雜網頁經常需要的方式對齊內容。

在這種情況下它有什麼用處? 好吧,走著瞧。

垂直對齊的列

使用Twitter Bootstrap,我們有一些.col-* s。 我們所需要做的就是將所需的.row 2顯示為彈性容器框,然後通過align-items屬性將其所有彈性項目 (列)垂直align-items

示例 (請仔細閱讀評論)

<div class="container">
    <div class="row vertical-align"> <!--
                    ^--  Additional class -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>
.vertical-align {
    display: flex;
    align-items: center;
}

輸出

彩色區域顯示列的填充框。

澄清align-items: center

align-items

Flex項目可以在Flex容器當前行的橫軸上對齊,類似於justify-content但是在垂直方向。 align-items為所有flex容器的項目(包括匿名flex項目)設置默認對齊方式。

align-items: center; 按中心值, 彈性物品的邊距框在線內的交叉軸上居中。

大警戒

重要說明#1:除非您將.col-xs-#類中的一個指定給列,否則Twitter Bootstrap不會指定特定小設備中列的width

因此,在這個特殊的演示中,我使用了.col-xs-*類,以便在移動模式下正確顯示列,因為它明確指定了列的width

但是,您也可以通過更改display: flex; 關閉 Flexbox佈局display: flex; display: block; 在特定的屏幕尺寸。 例如:

/* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

或者你可以指定.vertical-align 對特定的屏幕尺寸如下所示:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}

在那種情況下,我會選擇@KevinNelson的approach 。

重要說明#2:由於簡潔,省略了供應商前綴。 Flexbox語法在此期間已更改。 新的書面語法不適用於較早版本的Web瀏覽器(但與Internet Explorer 9不同,Internet Explorer 10及更高版本支持Flexbox)。

這意味著您還應該在生產模式下使用供應商前綴的屬性,如display: -webkit-box等。

如果你點擊Demo中的“切換編譯視圖” ,你會看到CSS聲明的前綴版本(感謝Autoprefixer )。

垂直對齊內容的全高立柱

正如你在前面的演示中看到的,列(flex項目)不再像它們的容器(flex容器盒,即.row元素)那麼高。

這是因為使用align-items屬性的center值。 默認值是stretch以便項目可以填充父元素的整個高度。

為了解決這個問題,你可以添加display: flex; 以及列:

在這裡舉例 (再次注意評論)

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items
                              horizontally within the column  */
}

輸出

彩色區域顯示列的填充框。

最後但並非最不重要的一點是 ,請注意,此處的演示和代碼片段旨在為您提供一種不同的想法,以提供一種實現此目標的現代方法。 如果您打算在現實世界的網站或應用程序中使用此方法,請介意“高度警示 ”部分。

如需進一步閱讀,包括瀏覽器支持,這些資源將非常有用:

1. 將div內的圖像與響應高度垂直對齊 2.最好使用額外的類,以免更改Twitter Bootstrap的默認.row


2018年更新

我知道最初的問題是Bootstrap 3,但現在Bootstrap 4已經發布了,這裡有一些關於垂直中心的更新指南。

重要! 垂直中心相對於父級的高度

如果您嘗試居中的元素的父元素沒有定義的高度 ,則沒有任何垂直居中解決方案可行!

Bootstrap 4

現在默認情況下 BS4是flexbox,有許多不同的垂直對齊方法: auto-marginsflexbox utilsdisplay utils以及vertical alignment utils 。 起初“垂直對齊應用程序”似乎很明顯,但這些適用於內聯和表格顯示元素。 這裡有一些Bootstrap 4垂直居中選項..

1 - 使用自動邊距的垂直中心:

垂直居中的另一種方法是使用my-auto 。 這會將元素置於其容器內。 例如, h-100使行全高, my-auto將垂直居中col-sm-12列。

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

BS4 - 使用自動邊距的垂直中心演示

my-auto表示垂直y軸的邊距,相當於:

margin-top: auto;
margin-bottom: auto;

2 - 帶Flexbox的垂直中心:

由於Bootstrap 4 .row現在display:flex您可以簡單地使用任意列上的align-self-center垂直居中...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

或者,在整個.row上使用align-items-center垂直居中對齊該行中的所有.row col-* ...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

BS4 - 垂直中心不同高度的列演示

3 - 垂直中心使用顯示設備:

引導程序4具有可用於顯示的顯示實用程序display:tabledisplay:table-celldisplay:inline等。這些可與垂直對齊應用程序一起使用,以對齊內聯,內嵌塊或表格單元格元素。

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

BS4 - 使用display utils Demo的垂直中心

另請參閱: 自舉中的垂直對齊中心4

Bootstrap 3

物品容器上的Flexbox方法居中:

.display-flex-center {
    display:flex;
    align-items:center;
}

轉換translateY方法:

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

.transform-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

顯示內聯方法:

.display-inline-block {
    display:inline;
}
.display-inline-block > div {
    display:inline-block;
    float:none;
    vertical-align: middle;
}

Bootstrap 3中心化方法演示


不需要表格和表格單元格。 它可以通過變換輕鬆實現。 例如: http://codepen.io/arvind/pen/QNbwyM : http://codepen.io/arvind/pen/QNbwyM

碼:

.child {
  height: 10em;
  border: 1px solid green;
  position: relative;
}
.child-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:4em;border:1px solid #000">Big</div>
    </div>
  </div>
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
  </div>
</div>


使用Bootstrap 4(目前處於alpha版本),您可以使用.align-items-center類。 所以你可以保持Bootstrap的響應特性。 工作對我來說很好。 請參閱Bootstrap 4文檔


嘗試這個,

.exe {
  font-size: 0;
}

.exe > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row  exe">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid grey">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid red">Small</div>
   </div>
 </div>


好吧,我不小心混合了一些解決方案,現在它終於適用於我的佈局,我試圖用最小分辨率的Bootstrap列製作3x3表格。

/* required styles */

#grid a {
  display: table;
}

#grid a div {
  display: table-cell;
  vertical-align: middle;
  float: none;
}


/* additional styles for demo: */

body {
  padding: 20px;
}

a {
  height: 40px;
  border: 1px solid #444;
}

a > div {
  width: 100%;
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<div id="grid" class="clearfix row">
  <a class="col-xs-4 align-center" href="#">
    <div>1</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>2</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>3</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>4</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>5</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>6</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>7</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>8</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>9</div>
  </a>
</div>


如果您使用Less版本的Bootstrap並自行編譯為CSS,則可以使用一些實用程序類與Bootstrap類一起使用。

我發現這些工作非常好,我希望保留Bootstrap網格系統的響應性和可配置性(如使用-md-sm ),但我希望給定行中的所有列都具有相同的垂直高度(這樣我就可以垂直對齊它們的內容並讓行中的所有列共享一個共同的中間)。

CSS /減:

.display-table {
    display: table;
    width: 100%;
}
.col-md-table-cell {
    @media (min-width: @screen-md-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.col-sm-table-cell {
    @media (min-width: @screen-sm-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.vertical-align-middle {
    vertical-align: middle;
}

HTML:

<div class="row display-table">
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
</div>

我在zessx的答案中詳細闡述了一下,以便在不同的屏幕尺寸上混合不同的色譜柱尺寸時更易於使用。

如果您使用Sass ,您可以將其添加到scss文件中:

@mixin v-col($prefix, $min-width) {
    @media (min-width: $min-width) {
        .col-#{$prefix}-v {
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
    }
}

@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);

它生成以下CSS(如果您不使用Sass,則可以直接在樣式表中使用):

@media (min-width: 1200px) {
    .col-lg-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 992px) {
    .col-md-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 768px) {
    .col-sm-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 480px) {
    .col-xs-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

現在,您可以在您的響應式列上使用它:

<div class="container">
    <div class="row">
        <div class="col-sm-7 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div><div class="col-sm-5 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div><div class="col-md-5 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div>
    </div>
</div>

我想我會分享我的“解決方案”,以防止其他人不熟悉@media查詢自己。

感謝@ HashemQolami的回答,我創建了一些媒體查詢,這些查詢可以像col- *類一樣移動,這樣我就可以將col- *堆疊起來用於移動,但是在大屏幕中垂直對齊顯示它們,例如

<div class='row row-sm-flex-center'>
    <div class='col-xs-12 col-sm-6'></div>
    <div class='col-xs-12 col-sm-6'></div>
</div>

.row-xs-flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:768px ) {
    .row-sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .row-md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .row-lg-flex-center {
        display:flex;
        align-items:center;
    }
}

更複雜的佈局,每個屏幕分辨率需要不同數量的列(例如,2行用於-xs,3用於-sm,4用於-md等)需要一些更高級的finagling,但對於帶-xs的簡單頁面堆疊和-sm和更大的行,這工作正常。


我真的發現下面的代碼可以使用Chrome瀏覽器,而不是其他瀏覽器,而不是當前選定的答案:

.v-center {
    display:table!important; height:125px;
}

.v-center div[class*='col-'] {
   display: table-cell!important;
   vertical-align:middle;
   float:none;
}
.v-center img {
   max-height:125px;
}

Bootply鏈接

您可能需要修改高度(特別是在.v-center )並根據需要刪除/更改div[class*='col-']上的div[class*='col-']


我遇到了同樣的問題。 在我的情況下,我不知道外部容器的高度,但這是我如何修復它:

首先為你的htmlbody元素設置高度,使它們為100%。 這個很重要! 沒有這個, htmlbody元素將簡單地繼承他們的孩子的身高。

html, body {
   height: 100%;
}

然後我有一個外部容器類:

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

最後是帶有class的內部容器:

.inner-container {
  display: table-cell;
  vertical-align: middle;
}

HTML和以下一樣簡單:

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

這是您需要垂直對齊內容的全部內容。 在小提琴中檢查它:

Jsfiddle


有幾種方法可以做到這一點

1。

display: table-cell;
vertical-align: middle;

和容器的CSS來

display:table;
  1. 使用填充和媒體屏幕相對於屏幕大小更改填充。 谷歌@media屏幕了解更多

  2. 使用相對填充,即按照%指定填充。

希望能幫助到你


自從Bootstrap以來,Flex行為本身就受到支持。4. row div中添加d-flex align-items-center 。 你不再需要修改你的CSS。

簡單的例子: http://jsfiddle.net/vgks6L74/ : http://jsfiddle.net/vgks6L74/

<!-- language: html -->    
<div class="row d-flex align-items-center">
  <div class="col-5 border border-dark" style="height:10em">  Big </div>
  <div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>

用你的例子: http://jsfiddle.net/7zwtL702/ : http://jsfiddle.net/7zwtL702/

<!-- language: html -->
<div class="row d-flex align-items-center">
    <div class="col-5">
        <div class="border border-dark" style="height:10em">Big</div>
    </div>
    <div class="col-2">
        <div class="border border-danger" style="height:3em">Small</div>
   </div>
</div>

來源: https://getbootstrap.com/docs/4.0/utilities/flex/https://getbootstrap.com/docs/4.0/utilities/flex/


    div{
    border:1px solid;
    }
    span{
    display:flex;
    align-items:center;

    }
    .col-5{
    width:100px;
    height:50px;
    float:left;
    background:red;
    }
    .col-7{
    width:200px;
    height:24px;
    

    float:left;
    background:green;

    }
   


    <span>
    <div class="col-5">
    </div>
    <div class="col-7"></div>
    </span>





twitter-bootstrap-3