使用图像引导程序 3 垂直对齐两行文本

Question

我试图在 Bootstrap 3 中垂直对齐两行文本和一个图像。图像总是相同的大小。当我在希望中断发生的行之间添加<br> 标记时，它会将第二行向下移动到图像下方。

Bootply demo here

<div class="col-xs-12 col-md-6">
  <img style="vertical-align:middle; max-height:100px;" src="http://placehold.it/100x150">
  <span class="bold">Product Name</span>
  <button name="remove" value="1" type="submit" class="font-tiny btn-link">Remove</button>

  <br> <!--this is where I would like to create line break-->
  <span class="small text-light">From "Company Name"</span> 

</div>

有人知道怎么做吗？我遇到了其他看起来相关但与引导程序 3 无关的问题。谢谢

Answer 1

或者像这样正确地做 - 真正的引导

http://www.bootply.com/QtLoWTnmi9

<div class="col-xs-12 col-md-6">
    <div class="col-md-2">
        <img class="image" src="http://placehold.it/100x150">
    </div>
    <div class="col-md-6 alignme">
        <span class="bold">Product Name</span>
        <button name="remove" value="1" type="submit" class="font-tiny btn-link">Remove</button>
        <br>        
        <span class="small text-light">From "Company Name"</span> 
    </div>
</div>

Answer 2

这应该可以解决问题：

<div class="col-xs-12 col-md-6">

  <div style="display:table-cell; vertical-align: middle">
    <img style="vertical-align:middle; max-height:100px;" src="http://placehold.it/100x150">
  </div>

  <div style="display: table-cell; vertical-align: middle; padding-left: 10px;">
    <span class="bold">Product Name</span>
    <button name="remove" value="1" type="submit" class="font-tiny btn-link">Remove</button>
    <br>
    <span class="small text-light">From "Company Name"</span>
  </div>

</div>

Answer 3

向左浮动您的图像。 float: left;