html - 将文本和图像与显示表格垂直对齐

Question

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

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

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

文本和图像的高度可以不同。

我需要两列的高度相同。

如果文字较高，我需要将图像列调整到相同的高度

如果图像列更高，我需要文本列的高度相同。

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

我认为使用 display: table; 会很容易并显示:表格单元格；

任何人看到我做错了什么

        <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>  

Answer 1

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