căn chỉnh theo chiều dọc với Bootstrap 3

914
corinem 2013-12-13 05:43.

Tôi đang sử dụng Twitter Bootstrap 3 và tôi gặp sự cố khi muốn căn chỉnh hai chiều dọc div, chẳng hạn - liên kết 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>

Hệ thống lưới trong Bootstrap sử dụng float: left, không phải display:inline-block, vì vậy thuộc tính vertical-alignkhông hoạt động. Tôi đã thử sử dụng margin-topđể sửa nó, nhưng tôi nghĩ đây không phải là giải pháp tốt cho thiết kế đáp ứng.

23 answers

946
zessx 2013-12-13 06:17.

Câu trả lời này cho thấy một bản hack, nhưng tôi thực sự khuyên bạn nên sử dụng flexbox (như đã nêu trong câu trả lời @Haschem ), vì nó hiện được hỗ trợ ở mọi nơi.

Liên kết demo:
- Bootstrap 3
- Bootstrap 4 alpha 6

Bạn vẫn có thể sử dụng một lớp tùy chỉnh khi cần:

.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

Việc sử dụng inline-blocksẽ thêm không gian giữa các khối nếu bạn để một khoảng trống thực trong mã của mình (như ...</div> </div>...). Khoảng trống thừa này sẽ phá vỡ lưới của chúng tôi nếu kích thước cột thêm tối đa 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>

Ở đây, chúng ta có thêm khoảng trắng giữa <div class="[...] col-lg-2"><div class="[...] col-lg-10">(một dấu xuống dòng và 2 tab / 8 dấu cách). Và vì thế...

Hãy đá thêm không gian này !!

<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>

Chú ý những bình luận dường như vô ích <!-- ... -->? Chúng rất quan trọng - nếu không có chúng, khoảng trắng giữa các <div>phần tử sẽ chiếm không gian trong bố cục, phá vỡ hệ thống lưới.

Lưu ý: Bootply đã được cập nhật

905
Hashem Qolami 2014-08-27 14:09.

Bố cục hộp linh hoạt

Với sự ra đời của Hộp linh hoạt CSS , nhiều cơn ác mộng 1 của các nhà thiết kế web đã được giải quyết. Một trong những thứ khó nhất, căn chỉnh theo chiều dọc. Bây giờ nó có thể ngay cả ở độ cao không xác định .

"Hai thập kỷ hack bố cục sắp kết thúc. Có thể không phải ngày mai, nhưng sớm thôi, và trong suốt phần đời còn lại của chúng ta."

- CSS huyền thoại Eric Meyer tại W3Conf 2013

Hộp linh hoạt (hay nói ngắn gọn là Hộp linh hoạt), là một hệ thống bố cục mới được thiết kế đặc biệt cho các mục đích bố trí. Đặc điểm kỹ thuật nêu rõ :

Bố cục linh hoạt bề ngoài tương tự như bố cục khối. Nó thiếu nhiều thuộc tính tập trung vào văn bản hoặc tài liệu phức tạp hơn có thể được sử dụng trong bố cục khối, chẳng hạn như phao và cột. Đổi lại, nó có được các công cụ đơn giản và mạnh mẽ để phân phối không gian và sắp xếp nội dung theo cách mà các ứng dụng web và các trang web phức tạp thường cần.

Nó có thể giúp gì trong trường hợp này? Được rồi để xem.


Các cột được căn chỉnh theo chiều dọc

Sử dụng Twitter Bootstrap, chúng tôi .rowcó một số vấn đề .col-*. Tất cả những gì chúng ta cần làm là hiển thị .row2 mong muốn dưới dạng hộp chứa flex và sau đó căn chỉnh tất cả các mục flex của nó (các cột) theo chiều dọc theo thuộc align-itemstính.

VÍ DỤ TẠI ĐÂY (Vui lòng đọc các bình luận một cách cẩn thận)

<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;
}

Đầu ra

Khu vực được tô màu hiển thị hộp đệm của các cột.

Đang làm rõ về align-items: center

8.3 Căn chỉnh trục chéo: thuộc align-itemstính

Các mục flex có thể được căn chỉnh theo trục chéo của dòng hiện tại của container flex, tương tự như justify-contentnhưng theo hướng vuông góc. align-itemsđặt căn chỉnh mặc định cho tất cả các mục của vùng chứa linh hoạt, bao gồm cả các mục linh hoạt ẩn danh .

align-items: center; Theo giá trị trung tâm, hộp lề của mục linh hoạt được căn giữa ở trục chéo trong dòng.


Cảnh báo lớn

Lưu ý quan trọng # 1: Twitter Bootstrap không chỉ định widthcột trong các thiết bị cực nhỏ trừ khi bạn cung cấp một trong các .col-xs-#lớp cho các cột.

Do đó, trong bản trình diễn cụ thể này, tôi đã sử dụng .col-xs-*các lớp để các cột được hiển thị đúng cách ở chế độ di động, vì nó chỉ định widthrõ ràng cột.

Nhưng cách khác, bạn có thể tắt bố cục Flexbox đơn giản bằng cách chuyển display: flex;sang display: block;kích thước màn hình cụ thể. Ví dụ:

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

Hoặc bạn có thể xác định .vertical-align chỉ về kích cỡ màn hình cụ thể như sau:

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

Trong trường hợp đó, tôi sẽ sử dụng cách tiếp cận của @KevinNelson .

Lưu ý quan trọng số 2: Tiền tố nhà cung cấp bị bỏ qua do ngắn gọn. Cú pháp Flexbox đã được thay đổi trong thời gian đó. Cú pháp được viết mới sẽ không hoạt động trên các phiên bản trình duyệt web cũ hơn (nhưng không quá cũ như Internet Explorer 9! Flexbox được hỗ trợ trên Internet Explorer 10 trở lên).

Điều này có nghĩa là bạn cũng nên sử dụng các thuộc tính có tiền tố của nhà cung cấp display: -webkit-box, v.v. trong chế độ sản xuất.

Nếu bạn nhấp vào "Toggle Compiled View" trong Demo , bạn sẽ thấy phiên bản khai báo CSS có tiền tố (nhờ vào Autoprefixer ).


Các cột có chiều cao đầy đủ với nội dung được căn chỉnh theo chiều dọc

Như bạn thấy trong bản trình diễn trước , các cột (các mục linh hoạt) không còn cao bằng vùng chứa của chúng (hộp chứa linh hoạt. Tức là .rowphần tử).

Điều này là do centergiá trị sử dụng cho align-itemstài sản. Giá trị mặc định là stretchđể các mục có thể lấp đầy toàn bộ chiều cao của phần tử mẹ.

Để khắc phục điều đó, bạn cũng có thể thêm display: flex;vào các cột:

VÍ DỤ Ở ĐÂY (Một lần nữa, hãy nhớ các ý kiến)

.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  */
}

Đầu ra

Khu vực được tô màu hiển thị hộp đệm của các cột.

Cuối cùng, nhưng không kém phần quan trọng , hãy lưu ý rằng các bản trình diễn và đoạn mã ở đây nhằm cung cấp cho bạn một ý tưởng khác, nhằm cung cấp một cách tiếp cận hiện đại để đạt được mục tiêu. Vui lòng lưu ý phần " Cảnh báo lớn " nếu bạn định sử dụng phương pháp này trong các trang web hoặc ứng dụng trong thế giới thực.


Để đọc thêm bao gồm hỗ trợ trình duyệt, các tài nguyên này sẽ hữu ích:


1. Căn chỉnh theo chiều dọc hình ảnh bên trong div với chiều cao đáp ứng 2. Tốt hơn là sử dụng một lớp bổ sung để không thay đổi mặc định của Twitter Bootstrap .row.

49
Thanga 2016-10-02 05:01.

Đoạn mã dưới đây phù hợp với tôi:

.vertical-align {
    display: flex;
    align-items: center;
}
40
Zim 2017-03-22 02:14.

Cập nhật năm 2020

Tôi biết câu hỏi ban đầu dành cho Bootstrap 3 , nhưng bây giờ Bootstrap 4 đã được phát hành, đây là một số hướng dẫn cập nhật về trung tâm dọc.

Quan trọng! Tâm dọc có liên quan đến chiều cao của cha mẹ

Nếu phần tử gốc của phần tử mà bạn đang cố căn giữa không có độ cao xác định , thì không có giải pháp căn giữa dọc nào hoạt động!

Bootstrap 4

Bây giờ Bootstrap 4 là flexbox theo mặc định, có nhiều cách tiếp cận khác nhau để căn chỉnh theo chiều dọc bằng cách sử dụng: lề tự động , utils flexbox hoặc utils hiển thị cùng với utils căn chỉnh dọc . Lúc đầu, "vertical align utils" có vẻ hiển nhiên, nhưng chúng chỉ hoạt động với các phần tử hiển thị nội tuyến và bảng. Dưới đây là một số tùy chọn căn giữa theo chiều dọc của Bootstrap 4 ..


1 - Trung tâm dọc sử dụng lề tự động:

Một cách khác để căn giữa theo chiều dọc là sử dụng my-auto. Điều này sẽ căn giữa phần tử trong vùng chứa của nó. Ví dụ: h-100làm cho hàng có chiều cao đầy đủ và my-autosẽ căn giữa theo chiều dọc của col-sm-12cột.

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

Bootstrap 4 - Căn giữa dọc sử dụng lề tự động Demo

my-auto đại diện cho lề trên trục y thẳng đứng và tương đương với:

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

2 - Trung tâm dọc với Flexbox:

Kể từ khi Bootstrap 4 .rowlà bây giờ, display:flexbạn có thể chỉ cần sử dụng align-self-centertrên bất kỳ cột nào để căn giữa theo chiều dọc của nó ...

       <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>

hoặc, sử dụng align-items-centertrên toàn bộ .rowđể căn giữa theo chiều dọc tất cả col-*trong hàng ...

       <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>

Bootstrap 4 - Demo các cột chiều cao khác nhau theo chiều dọc


3 - Trung tâm Dọc sử dụng Utils Hiển thị:

Bootstrap 4 có utils hiển thị có thể được sử dụng cho display:table, display:table-cell, display:inline, vv .. Đây có thể được sử dụng với các utils kết theo chiều dọc để inline class, inline-block hoặc các yếu tố ô trong bảng.

<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>

Bootstrap 4 - Trung tâm dọc sử dụng hiển thị utils Demo

Xem thêm: Trung tâm căn chỉnh dọc trong Bootstrap 4


Bootstrap 3

Phương thức Flexbox trên vùng chứa (các) mục ở giữa:

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

Chuyển đổi phương thức translateY:

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

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

Hiển thị phương pháp nội tuyến:

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

Demo của Bootstrap 3 phương pháp căn giữa

28
user2249160 2013-12-13 06:20.

Hãy thử điều này trong CSS của div:

display: table-cell;
vertical-align: middle;
22
Kevin Nelson 2015-01-05 14:05.

Tôi nghĩ tôi sẽ chia sẻ "giải pháp" của mình trong trường hợp nó giúp ích cho bất kỳ ai khác, những người không quen thuộc với chính các truy vấn @media.

Nhờ câu trả lời của @ HashemQolami, tôi đã xây dựng một số truy vấn phương tiện có thể hoạt động trên thiết bị di động như các lớp col- * để tôi có thể xếp col- * cho thiết bị di động nhưng hiển thị chúng theo chiều dọc ở trung tâm cho màn hình lớn hơn, ví dụ:

<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;
    }
}

Các bố cục phức tạp hơn yêu cầu số lượng cột khác nhau trên mỗi độ phân giải màn hình (ví dụ: 2 hàng cho -xs, 3 cho -sm và 4 cho -md, v.v.) sẽ cần một số tài chính nâng cao hơn, nhưng đối với một trang đơn giản với -xs xếp chồng lên nhau và -sm và lớn hơn trong các hàng, điều này hoạt động tốt.

22
Manuszep 2015-01-27 23:11.

Sau câu trả lời được chấp nhận, nếu bạn không muốn tùy chỉnh đánh dấu, để tách các mối quan tâm hoặc đơn giản vì bạn sử dụng CMS, giải pháp sau hoạt động tốt:

.valign {
  font-size: 0;
}

.valign > [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 valign">
   <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>

Hạn chế ở đây là bạn không thể kế thừa kích thước phông chữ từ phần tử mẹ vì hàng đặt kích thước phông chữ thành 0 để loại bỏ khoảng trắng.

21
user1477388 2015-02-15 09:21.

Tôi thích phương pháp này theo CSS trung tâm dọc của David Walsh :

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

Điều transformkhông cần thiết; nó chỉ tìm thấy trung tâm chính xác hơn một chút. Do đó, Internet Explorer 8 có thể hơi kém trung tâm, nhưng nó vẫn không tệ - Tôi có thể sử dụng - Transforms 2d .

18
Edvard Åkerberg 2018-05-03 02:10.

Đây là giải pháp của tôi. Chỉ cần thêm lớp này vào nội dung CSS của bạn.

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

Sau đó, HTML của bạn sẽ giống như sau:

<div class="col-xs-12 align-middle">
  <div class="col-xs-6" style="background-color:blue;">
    <h3>Item</h3>
    <h3>Item</h3>
  </div>
  <div class="col-xs-6" style="background-color:red;">
    <h3>Item</h3>
  </div>
</div>

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
    <title>Title</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 align-middle">
          <div class="col-xs-6" style="background-color:blue;">
            <h3>Item</h3>
            <h3>Item</h3>
          </div>
          <div class="col-xs-6" style="background-color:red;">
            <h3>Item</h3>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

16
Ryan Alexander 2015-06-01 13:13.

Tôi chỉ làm điều này và nó làm những gì tôi muốn nó làm.

.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

Và bây giờ trang của tôi trông giống như

<div class='container-fluid align-middle'>
    content

 +--------------------------------+
 |                                |
 |  +--------------------------+  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  +--------------------------+  |
 |                                |
 +--------------------------------+
11
babycakes 2014-07-13 09:57.

Tôi thực sự thấy mã sau hoạt động bằng Chrome chứ không phải các trình duyệt khác với câu trả lời hiện được chọn:

.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;
}

Liên kết Bootply

Bạn có thể cần sửa đổi độ cao (cụ thể là .v-center) và loại bỏ / thay đổi div trên theo div[class*='col-']nhu cầu của bạn.

8
Kingsley Ijomah 2014-12-29 02:08.

Tôi đã gặp phải vấn đề tương tự. Trong trường hợp của tôi, tôi không biết chiều cao của thùng chứa bên ngoài, nhưng đây là cách tôi sửa nó:

Đầu tiên hãy đặt chiều cao cho các phần tử của bạn htmlbodysao cho chúng bằng 100%. Cái này quan trọng! Nếu không có điều này, các yếu tố htmlbodysẽ đơn giản là thừa hưởng chiều cao của con cái họ.

html, body {
   height: 100%;
}

Sau đó, tôi có một lớp vùng chứa bên ngoài với:

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

Và cuối cùng là thùng chứa bên trong với lớp:

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

HTML đơn giản như:

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

Đây là tất cả những gì bạn cần để căn chỉnh nội dung theo chiều dọc. Kiểm tra nó trong fiddle:

Jsfiddle

8
Arvind Bhardwaj 2016-03-02 21:21.

Không cần bất kỳ bảng và ô bảng nào. Nó có thể đạt được dễ dàng bằng cách sử dụng biến đổi.

Ví dụ: http://codepen.io/arvind/pen/QNbwyM

Mã:

.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>

7
Gerbus 2015-09-24 08:33.

Nếu bạn đang sử dụng phiên bản Ít hơn của Bootstrap và tự biên dịch thành CSS, bạn có thể sử dụng một số lớp tiện ích để sử dụng với các lớp Bootstrap.

Tôi nhận thấy những thứ này hoạt động rất tốt khi tôi muốn duy trì khả năng đáp ứng và cấu hình của hệ thống lưới Bootstrap (như sử dụng -mdhoặc -sm), nhưng tôi muốn tất cả các cột trong một hàng nhất định đều có cùng chiều cao theo chiều dọc (để tôi có thể sau đó căn chỉnh nội dung của chúng theo chiều dọc và có tất cả các cột trong hàng đều có chung một khoảng giữa).

CSS / Ít hơn:

.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>
6
sb.olofsson 2016-06-10 07:41.

Tôi đã giải thích một chút về câu trả lời của zessx , để giúp bạn dễ dàng sử dụng hơn khi trộn các kích thước cột khác nhau trên các kích thước màn hình khác nhau.

Nếu bạn sử dụng Sass , bạn có thể thêm cái này vào tệp scss của mình:

@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);

Tạo CSS sau (bạn có thể sử dụng trực tiếp trong các bảng định kiểu của mình, nếu bạn không sử dụng 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;
    }
}

Bây giờ bạn có thể sử dụng nó trên các cột đáp ứng của mình như sau:

<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>
5
Bot élecul 2017-10-17 11:06.

Các hành vi linh hoạt được hỗ trợ nguyên bản kể từ Bootstrap 4. Thêm d-flex align-items-centervào rowdiv. Bạn không cần phải sửa đổi nội dung CSS của mình nữa.

Ví dụ đơn giản: 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>

Với ví dụ của bạn: 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>

Nguồn: Flex · Bootstrap

4
godblessstrawberry 2015-05-29 06:05.

OK, vô tình tôi đã trộn một vài giải pháp và cuối cùng nó hoạt động cho bố cục của tôi, nơi tôi đã cố gắng tạo một bảng 3x3 với các cột Bootstrap ở độ phân giải nhỏ nhất.

/* 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>

2
Nambi N Rajan 2017-05-16 22:06.

    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>

2
Pho 2020-07-14 15:05.

Đối với phiên bản bootstrap mới nhất, bạn có thể sử dụng align-items-center. Sử dụng tiện ích căn chỉnh các mục trên vùng chứa flexbox để thay đổi căn chỉnh của các mục flex trên trục chéo (trục y để bắt đầu, trục x nếu flex-hướng: cột). Chọn từ đầu, cuối, giữa, đường cơ sở hoặc kéo dài (mặc định của trình duyệt).

<div class="d-flex align-items-center">
    ...
</div>
1
core114 2017-10-10 02:25.

Thử đi,

.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>

1
Amaan Iqbal 2017-06-25 19:40.

Có một số cách bạn có thể thực hiện:

  1. Sử dụng 

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

    và CSS của vùng chứa để

    display: table;
    
  2. Sử dụng padding cùng với media-screen để thay đổi padding so với kích thước màn hình. Google @media screen để biết thêm.

  3. Sử dụng đệm tương đối

    Tức là chỉ định khoảng đệm theo%

0
DiCaprio 2017-03-21 04:46.

Với Bootstrap 4 (hiện đang ở dạng alpha), bạn có thể sử dụng .align-items-centerlớp này. Vì vậy, bạn có thể giữ đặc tính đáp ứng của Bootstrap. Ngay lập tức xứng đáng với tôi. Xem Tài liệu Bootstrap 4 .

0
Pacific P. Regmi 2017-11-25 22:41.

HTML

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

CSS

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Một thương hiệu kế thừa khác có được cuộc sống mới khi những người chủ mới của Black Opal có được Hội chợ thời trang

Một thương hiệu kế thừa khác có được cuộc sống mới khi những người chủ mới của Black Opal có được Hội chợ thời trang

Desiree Rogers, trái, và Cheryl Mayberry McKissack Chuyển sang, Fenty Beauty và Pat McGrath, có một đế chế làm đẹp mới do phụ nữ làm chủ đang trỗi dậy. Sau thương vụ mua lại mỹ phẩm Black Opal vào tháng 9, đội ngũ quyền lực của Giám đốc điều hành công ty Desiree Rogers và Chủ tịch Cheryl Mayberry McKissack đã thông báo mua lại thương hiệu làm đẹp tiên phong Fashion Fair từ người sáng lập Johnson Publishing Company (JPC).

Ngoài việc trở nên vô nghĩa, các bên bộc lộ giới tính giờ đây đã trở nên chết người

Ngoài việc trở nên vô nghĩa, các bên bộc lộ giới tính giờ đây đã trở nên chết người

Đối với những người có quá nhiều thời gian, tiệc tiết lộ giới tính là một cách thú vị để không cần áp đặt những định kiến ​​hạn chế lên thai nhi trước một đối tượng bạn bè giả vờ quan tâm một cách lịch sự. Tuy nhiên, việc chỉ dựa vào những chiếc bánh nướng có màu nhân tạo để biểu thị một tiếng hoo-ha hoặc một đứa trẻ đi tè đã trở nên xa xỉ trong các bậc cha mẹ trên Instagram.

Kirstjen Nielsen đang cố gắng đổi mới bản thân với tư cách là một người phụ nữ 'nói ra sự thật cho sức mạnh'

Kirstjen Nielsen đang cố gắng đổi mới bản thân với tư cách là một người phụ nữ 'nói ra sự thật cho sức mạnh'

Hôm thứ Tư, cựu Bộ trưởng An ninh Nội địa Kirstjen Nielsen vì một lý do nào đó đã được đưa ra một diễn đàn để phát biểu tại Hội nghị thượng đỉnh Những người phụ nữ quyền lực nhất của Fortune. Và có thể đoán trước được, người phụ nữ giám sát các nỗ lực (đang diễn ra) của chính quyền Trump nhằm chia cắt các gia đình ở biên giới đã sử dụng thời gian của mình như một cơ hội để tự bảo vệ mình và tự nhận mình là người — và hãy hít thở sâu ở đây — “đã nói sự thật với quyền lực.

Toyota Racing Development sẽ cho ra mắt Supra 3000GT Concept, Massive Wing vào tháng tới

Toyota Racing Development sẽ cho ra mắt Supra 3000GT Concept, Massive Wing vào tháng tới

Vì thế hệ mới nhất của chiếc xe điều chỉnh được yêu thích trên thế giới hiện đã có mặt tại đây, nên chỉ có điều kiện là Toyota Racing Development sẽ đưa phiên bản Supra thế hệ thứ năm sửa đổi của riêng mình đến SEMA vào tháng tới. Toyota đã cho chúng tôi một gợi ý về những gì sẽ xảy ra trong tuần này: một chiếc Concept GR Supra 3000GT hiện đại.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language