图像垂直引导程序与文本对齐

Question

I want to know the proper way to put an image in the center of the page, and then beside the image vertical align 2 lines of text. should I put the image and text in one bootstrap coloumn or should i have the image in one coloumn and the text in a seperate coloumn. I know there are a few ways to do this, i just want to know the proper method.

<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

This is the right way to do this

 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> 

This is the fiddle

NOTE : Use https:// when importing external resources, use p tag instead of span if you want to use block texts.

Answer 2

use this

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