Twitter bootstrap 3 - cột căn chỉnh dọc trong một hàng [ở giữa]

Question

Tôi thấy bootstrap không sửa chiều cao của các cột trong hàng. Ví dụ: hình ảnh 1: 1, nó sẽ được đáp ứng trong cột, nhưng vị trí của hình ảnh ở trên cùng của hàng.

Nếu tôi có văn bản trong thẻ heading, Thẻ có lề mặc định đẩy văn bản bên dưới. Vì vậy, hình ảnh sẽ được liên kết với phần trên cùng và văn bản sẽ nhỏ hơn phần trên cùng.

Điều gì sẽ xảy ra nếu tôi cần chuẩn hóa các cột và căn chỉnh cột ở giữa?

Câu hỏi của tôi là:

• Có bootstrap cách tự nhiên để gắn kết các cột?
• Nếu nó không hỗ trợ loại căn chỉnh này, "hack" nào tôi có thể sử dụng? Tôi đã thử một số "hack" nhưng chúng ảnh hưởng đến chức năng bootstrap cơ bản.

chính xác tôi cần phải làm gì:

Xin lỗi nhưng thật khó để làm cho nó trong một jsfiddle, Nó bao gồm các chỉ thị góc và các mẫu. Chỉ cần ví dụ:

Tôi có một chỉ thị mà tạo ra này:

tôi cần phải làm căn chỉnh hình ảnh ở giữa, hoặc ít nhất là lúc bắt đầu dọc heading. Ví dụ:

Tôi đã thực hiện điều này jsfiddle nếu bạn muốn thử nghiệm. Tôi chỉ chấp nhận lời giải thích mà không có bất kỳ mã nào.

Tôi có thể sửa nó với một số "bị tấn công" css, nhưng tôi muốn biết làm thế nào tôi có thể làm điều đó đúng cách.

Answer 1

Một cách tiếp cận là sử dụng translateY trên các yếu tố img như thế này:

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

Bạn cũng sẽ muốn đưa hình ảnh bên trong một col-*-2 ..

Demo:http://bootply.com/tVyuhaFoww

Answer 2

Một cách khác để căn chỉnh hình ảnh ở đầu đoạn đầu tiên là phá vỡ thiết kế của bạn thành hai hàng. Hàng đầu tiên chứa tiêu đề và hàng thứ hai chứa hình ảnh, đoạn văn và liên kết. Điều này gần giống với hình ảnh thứ hai của bạn ở trên, nếu đó là cách bạn muốn nó nhìn.

http://jsfiddle.net/404vska2/

<div class="row"> 
    <div class="col-xs-10 col-xs-push-2"> 
    <h4 class="ng-binding">Monaco make Bernardo Silva move permanent</h4> 
    </div> 
</div> 
<div class="row"> 
    <img src="http://s12.postimg.org/gt71dlbd5/1421893782_flat_world_cup_icon_512_Socker_1.png" alt="" class="col-xs-2"> 
    <div class="col-xs-10"> 
    <p class="ng-binding">Bernardo Silva's loan move from SL Benfica to AS Monaco FC has been made permanent, with the 20-year-old settling in well since his summer switch to France.</p> 
    <span class="rss-news-date ng-binding">Jan 21, 2015</span> 
    <p><a ng-href="http://www.uefa.com/uefachampionsleague/news/newsid=2204161.html?rss=2204161+Monaco+make+Bernardo+Silva+move+permanent" href="http://www.uefa.com/uefachampionsleague/news/newsid=2204161.html?rss=2204161+Monaco+make+Bernardo+Silva+move+permanent">Lean more</a> </p> 
    </div> 
</div>