Làm cách nào để căn giữa trong div phụ huynh trong bố cục lỏng

Question

Tôi có một div chứa hai div con và chúng được dự định là một phần của bố cục lỏng, vì vậy tôi không thể đặt kích thước cố định cho chúng trong px.

Có hai mục tiêu ở đây:

1. Căn hai divs con theo chiều ngang, mà tôi đã đạt được sử dụng float: left và float: right tương ứng.

2. Căn giữa văn bản (trong các div con) so với div gốc. Văn bản ngắn và có một dòng duy nhất theo thiết kế.

Những gì tôi có bây giờ: http://jsfiddle.net/yX3p9/

Rõ ràng, hai divs con không lấy chiều cao đầy đủ của div cha mẹ, và do đó văn bản của họ không theo chiều dọc làm trung tâm liên quan đến các div cha mẹ. Về mặt khái niệm, để đạt được các mục tiêu trên, chúng ta có thể làm cho các div con được căn giữa theo chiều dọc trong div cha hoặc chúng ta có thể làm cho các div con chiếm toàn bộ chiều cao của div cha. Cách mạnh mẽ để làm như vậy là gì?

* Hỗ trợ trình duyệt: IE 9+ và các trình duyệt hiện đại thông thường khác.

Answer 1

tôi cập nhật fiddle của bạn: http://jsfiddle.net/yX3p9/7/

tôi đã sử dụng display: table-cell; để sử dụng vertical-align: middle;

Answer 2

Sử dụng line-height. Nếu nó chỉ là một dòng văn bản, một dòng cao-chiều cao sẽ có hiệu quả vị trí văn bản ở giữa dòng.

Hoặc thử display:table-cell kết hợp với vertical-align.

Answer 3

Ngoài việc sử dụng bảng CSS, bạn cũng có thể sử dụng định vị tuyệt đối để có được một bố cục tương tự.

Sử dụng HTML của bạn như là (không yếu tố phụ), áp dụng CSS sau đây:

html, body { 
    height: 100%; 
    width: 100%; 
    font-size: 13px; 
} 
.parent { 
    background-color: grey; 
    height: 20%; 
    line-height: 1.6em; 
    font-size: 1.6em; 
    min-height: 1.6em; 
    position: relative; 
} 
.left, .right { 
    position: absolute; 
    top: 50%; 
    margin-top: -0.8em; 
} 
.left { 
    background-color: yellow; 
    padding-left: 20px; 
    left: 0; 
} 
.right { 
    background-color: red; 
    padding-right: 20px; 
    right: 0; 
} 

Bạn có thể xem fiddle bản demo tại địa chỉ: http://jsfiddle.net/audetwebdesign/cByHa/

Trong .parent container, thiết lập các line-height với giá trị rõ ràng (cỡ 1.6em), position: relative và min-height để duy trì đủ chiều cao cho văn bản.

Hai yếu tố con .left và .right được định vị tuyệt đối với top: 50% và sử dụng margin-top: -0.8em để có được đứng trung (sử dụng một nửa giá trị line-height).

Sử dụng độ lệch trái hoặc phải (hoặc phần đệm) để điều chỉnh vị trí nằm ngang của phần tử con nếu cần.

Answer 4

html, body { 
    height: 100%; 
    width: 100%; 
    font-size: 13px; 
} 

.parent { 
    height: 50px; 
    background-color: grey; 
    font-size: 1.6em; 
} 

.left { 
    margin-left: 2%; 
    float: left; 
    background-color: yellow; 
    height:100%; 
} 

.right { 
    margin-right: 2%; 
    float: right; 
    background-color: red; 
    height:100%;  
} 
.parent span{ 
    display:table; 
    height:100%; 
} 
.parent em{ 
    display:table-cell; 
    vertical-align:middle; 

} 

http://jsfiddle.net/yX3p9/13/

Answer 5

Tôi thích việc sử dụng chuyển đổi trên các câu trả lời ở trên.

top: 50%; 
transform: translateY(-50%); 
-ms-transform: translateY(-50%); 
-moz-transform: translateY(-50%); 
-webkit-transform: translateY(-50%); 
-o-transform: translateY(-50%); 

Theo kinh nghiệm của tôi nó hoạt động trong nhiều tình huống và trên tất cả các trình duyệt chính (thậm chí IE9 +).

Nếu bạn sử dụng SCSS, thậm chí bạn có thể muốn thực hiện mixin này:

@mixin v-align($position: absolute){ 
    position: $position; top: 50%; 
    transform: translateY(-50%); 
    -ms-transform:translateY(-50%); /* IE */ 
    -moz-transform:translateY(-50%); /* Firefox */ 
    -webkit-transform:translateY(-50%); /* Safari and Chrome */ 
    -o-transform:translateY(-50%); 
}