Question

我对Bootstrap和HTML / CSS比较陌生。我想将一个段落对齐到同一行上的图像的中心。图片必须位于左侧（例如pull-left类）。

这就是我写的：

  <div class="container">  
    <div class="row">
      <div class="span12">
        <h2>Leeuwkes</h2>
        <img class="pull-left" alt="" src="img/groepen/leeuwkesEmbleem.jpg" height="200" width="200"/>
        <p>
          De Leeuwkes zijn onze jongste kapoenen onder ons. Zit jij in het eerste of tweede leerjaar, 
          trek dan je laarzen aan en kom elke zondag van 14u tot 16u30 met ons mee ravotten! 
          Ben jij een echte modderfan of hang je liever het aapje uit, heb je veel fantasie of hou je van
          spelen, SPELEN, SPELEN, kom dan zeker een kijkje nemen! We verwachten jullie met open armen.
        </p>
      </div>
    </div>
  </div>

看起来像这张图片：

我希望它看起来像这张图片：

Answer 1

你必须给出段落的顶部和底部填充像：

p{
  padding-top:10px;
  padding-bottom:10px;
}

或者您可以为此段落创建一个类，并将此样式添加到类

Answer 2

如果您的HTML非常灵活，可以将其更改为：

img, span {
  display:table-cell;
  vertical-align:middle;
}
.span12 {
  display:table;
}

<div class="container">
  <div class="row">
    <h2>Leeuwkes</h2>
    <div class="span12">
      <img alt="" src="http://www.placekitten.com/200/200" height="200" width="200" />
      <span>De Leeuwkes zijn onze jongste kapoenen onder ons. Zit jij in het eerste of tweede leerjaar, 
          trek dan je laarzen aan en kom elke zondag van 14u tot 16u30 met ons mee ravotten! 
          Ben jij een echte modderfan of hang je liever het aapje uit, heb je veel fantasie of hou je van
            spelen, SPELEN, SPELEN, kom dan zeker een kijkje nemen! We verwachten jullie met open armen.</span>
    </div>
  </div>
</div>

Answer 3

您可以将flex属性用于此目的。

 .box{
  display:flex;
  align-items:center;
  }

这是理解https://jsfiddle.net/arkqjq47/

的小提琴

Bootstrap：如何对齐img中心旁边的段落？

3 个答案: