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

Question

I am trying to vertically align two lines of text and an image in Bootstrap 3. The image is always going to be the same size. When I add a <br> tag between the lines where I want the break to occur, it moves the second line down below the image.

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>

Does anyone know how to do this? I have come across other questions that appear related but not for bootstrap 3. Thanks

Answer 1

This should do the trick:

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

Float your image left. float: left;

Answer 3

or do it right like this - true bootstrap

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>