垂直对齐文本和图像显示用表

我这里有一个的jsfiddle - http://jsfiddle.net/bva700wx/5/垂直对齐文本和图像显示用表

这是一个非常简单的引导布局。

它是2行的包含图像和文本的列。

文字和图像的高度可能会有所不同。

我需要两列的高度相同。

如果文字是高我需要的图像山坳到相同的高度

如果图像山坳越高我需要的文本山坳是相同的高度。

然后我需要垂直居中的图像和文字。

我认为这将很容易与显示：表;并显示：tabel-cell;

任何看看有什么我做错了

 <div class="container"> 

      <div class="row"> 



       <div class="col-sm-3 box text-center"> 
        <img src="http://placehold.it/100x50" /> 
       </div> 

       <div class="col-md-9 box"> 
        <p> 
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
        </p>  
       </div> 


      </div> 

      <div class="row"> 

       <div class="col-sm-3 box text-center"> 
        <img src="http://placehold.it/100x150" /> 
       </div> 

       <div class="col-md-9 box"> 
        <p> 
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
        </p> 
       </div> 

      </div> 

     </div>

来源

2014-09-27 ttmt

将'vertical-align：middle;'移动到表格单元格中：http://jsfiddle.net/hashem/bva700wx/4/ – 2014-09-27 11:57:48

特别为了与Twitter引导程序进行垂直对齐，您可以参考：[vertical align与引导3]（http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3）。 – 2014-09-27 11:59:00

这似乎在750px - 615px之间工作，但高于版面布局 – ttmt 2014-09-27 12:07:44

浮动会干扰垂直对齐。我修改了你的fiddle给你一个工作的例子。

来源

2014-09-27 13:12:40

垂直对齐文本和图像显示用表

回答

相关问题