0

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

Dan
  • 9,391
  • 5
  • 41
  • 73

3 Answers3

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>
Ruben Kislaki
  • 428
  • 3
  • 7
  • @ruben you are teaching bad habits.. inline styles and not making use of bootraps own columns – nolawi May 30 '14 at 19:02
  • I agree padding-left isn't great, however it works for me in this case – Dan May 30 '14 at 19:03
  • @nol why should I make use of bootstrap columns if they don't provide a way to vertically align elements? – Ruben Kislaki May 30 '14 at 19:25
  • @RubenKislaki you can always add a class to the columns if you want to modify. valign is not used a lot http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 – nolawi May 30 '14 at 20:18
1

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>
Dan
  • 9,391
  • 5
  • 41
  • 73
nolawi
  • 4,439
  • 6
  • 22
  • 45
0

Float your image left. float: left;

jme11
  • 17,134
  • 2
  • 38
  • 48