CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
caffeinescript
caffeinescript

Reputation: 1411

image vertical align bootstrap with text

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/

Upvotes: 0

Views: 99

Answers (3)

Jinu Kurian
Jinu Kurian

Reputation: 9406

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.

Upvotes: 1

sandeep pandharpure
sandeep pandharpure

Reputation: 39

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

Upvotes: 0

Harshal Shendre
Harshal Shendre

Reputation: 31

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 
 }

Upvotes: 0

Related Questions