垂直对齐两行文本与图像引导3 [英] Vertical align two lines of text with image bootstrap 3

问题描述

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

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

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.感谢

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

推荐答案

或这样做 - true bootstrap

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>

这篇关于垂直对齐两行文本与图像引导3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！