Bootstrap 2列垂直对齐+ 1图像对齐左+ 1图像对齐右

Question

我刚开始玩bootstrap时没有取得多大成功。 我正在尝试做以下事情。 每列有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