Làm thế nào để tập trung phần tử con theo chiều dọc bên trong div

Question

thể trùng lặp:
How to make an image center (vertically & horizontally) inside a bigger div

HTML code:

<div class="promo_tumbs col_12"> 
    <div class="promo_tumb"></div> 
    <div class="promo_tumb"></div> 
    <div class="promo_tumb"></div> 
    <div class="promo_tumb"></div> 
    <div class="promo_tumb"></div> 
</div> 

CSS phần:

.promo_tumbs { 
    height: 155px; 
    background: #058; 
} 
.promo_tumb { 
    height: 75px; 
    width: 125px; 
    background: #990000; 
    float: left; 
    margin: 0 10px; 
    text-align: center; 
} 

Làm cách nào để tôi có thể xoay chiều dọc .promo_tumb?

Answer 1

Đọc bài viết này về căn giữa theo chiều dọc.

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Nếu bạn không hỗ trợ muốn IE7 hoặc thấp hơn thì bạn có thể sử dụng vertical-align : middle.

Nếu không:

1. Đặt display để table trong .promo_tumbs col_12
2. Đặt vertical-align-middle & display-table-cell cho .promo_tumb

và nó sẽ làm việc.

Answer 2

Chiều cao (155px và 75px tương ứng) luôn được sửa? Trong trường hợp đó nó muốn được đơn giản như thay đổi lề .promo_tumb:

margin: 40px 10px 

Answer 3

sử dụng các vertical-align: middle; trong css/phong cách cho promo_thumbs.

Answer 4

css part insert in head section.......... 

    <style type="text/css"> 
    .promo_tumbs {height: 155px; background: #058; } 
    .promo_tumb {height: 75px; width: 125px; background: #990000; float: left; 

    margin: 40px 50px; 

    text-align: center; } 
    </style> 

cơ thể một phần mã hóa ......

  <div class="promo_tumbs col_12"> 
       <div class="promo_tumb"></div> 
       <div class="promo_tumb"></div> 
       <div class="promo_tumb"></div> 
       <div class="promo_tumb"></div> 
       <div class="promo_tumb"></div> 
      </div> 

Answer 5

.promo_tumbs {height: 155px; background: #058; 
    vertical-align: middle; 
    display:table-cell; 
}