Question

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

<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://，如果要使用块文本，请使用p标记而不是span。

Answer 2

使用此

 <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" class="displa`enter code here`yed" />
      </div>
      <div class="col-xs-3">
           <span style="font-size:48px;">Test</span>
           <span style="vertical-align:middle; line-height: 30px;">Test second line. </span>
      </div>
 </div>

 img.displayed 
 {
      display: block;
      margin-left: auto;
      margin-right: auto 
 }

Answer 3

<div class="row">
  <div class="col-md-8 col-sm-8 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-md-4 col-sm-4 col-xs-4">
    <div style="font-size:48px;">Test</div>
    <div style="font-size:24px;">Test second line. </div>
  </div>
</div>

图像垂直对齐bootstrap与文本

3 个答案: