Бутстрап 2 столбца вертикальный выравнивание + 1 изображение выравнивание влево + 1 изображение выравнивание справа

Question

У меня нет большого успеха, поскольку я только начал играть с бутстрапом. Я пытаюсь сделать следующее. 2 столбца с изображением, которое выровнено по вертикали. В левом столбце будет выровнено изображение, а правый столбец будет выравниваться по изображению.

Так что, когда он «реагирует» это будет выглядеть так:

код, который я только понять это выглядит - его вертикально, но не горизонтально выровнены:

<div class="container" > 
     <div class="col-md-6"> 
      <div style="display:table; height:100px;"> 
       <div style="display:table-cell; vertical-align:middle; "> 
        <div style="float:left;"> 
         <img src="http://tarheelreader.org/theme/images/reviewed.png" /> 
        </div> 
       </div> 
      </div>    
     </div> 
     <div class="col-md-6"> 
      <div style="display:table; height:100px;"> 
       <div style="display:table-cell; vertical-align:middle;"> 
        <div style="float:right;"> 
         <img src="http://tarheelreader.org/theme/images/reviewed.png" /> 
        </div> 
       </div> 
      </div>    
     </div> 
    </div> 

Это выглядит следующим образом:

Любые предложения о том, как я получу его, удовлетворяя первым двум изображениям выше? спасибо!

Answer 1

Это потому, что вы не плавали слева или справа от хорошего элемента.

Вот рабочий код с лучшим классом (pull-right и pull-left)

<div class="container" > 
     <div class="col-md-6"> 
      <div style="display:table; height:100px;" class="pull-left"> 
       <div style="display:table-cell; vertical-align:middle; "> 
        <div> 
         <img src="http://tarheelreader.org/theme/images/reviewed.png" /> 
        </div> 
       </div> 
      </div>    
     </div> 
     <div class="col-md-6"> 
      <div style="display:table; height:100px;" class="pull-right"> 
       <div style="display:table-cell; vertical-align:middle;"> 
        <div> 
         <img src="http://tarheelreader.org/theme/images/reviewed.png" /> 
        </div> 
       </div> 
      </div>    
     </div> 
    </div> 

bootply: http://www.bootply.com/115806