html - 图像垂直对齐 bootstrap 与文本

Question

我想知道将图像放在页面中央的正确方法，然后在图像旁边垂直对齐 2 行文本。我应该将图像和文本放在一个 Bootstrap 列中，还是应该将图像放在一个列中，将文本放在单独的列中。我知道有几种方法可以做到这一点，我只是想知道正确的方法。

<div class="row">
  <div class="col-xs-9">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="vertical-align:middle" />
  </div>
  <div class="col-xs-3">
    <span style="font-size:48px;">Test</span>
    <span style="font-size:24px;">Test second line. </span>
  </div>
</div>

https://jsfiddle.net/k90s5fec/

Answer 1

这是正确的做法

div{
  display: inline-block;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
  <div class="col-xs-8">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" style="vertical-align:middle" />
  </div>
  <div class="col-xs-4">
    <p style="font-size:48px;">Test</p>
    <p style="font-size:24px;">Test second line. </p>
  </div>
</div>

这是 fiddle

注意:导入外部资源时使用https://， 如果您想使用 block 文本，请使用 p 标签而不是 span。