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

时间:2014-09-27 11:54:51

标签: html css twitter-bootstrap vertical-alignment

我这里有一个jsfiddle - http://jsfiddle.net/bva700wx/5/

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

它包含带有图像的cols和带有文本的col的2行。

文字和图片的高度可能不同。

我需要两列的高度相同。

如果文字较高,我需要将图像col设置为相同的高度

如果图像col更高,我需要将文本col设置为相同的高度。

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

我觉得这很容易用display:table;并显示: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>  

1 个答案:

答案 0 :(得分:1)

浮动干扰垂直对齐。我修改了您的fiddle,为您提供了一个有效的示例。