CODEWITHSUNDEEP
twitter-bootstrap-3
Greg Gum
Greg Gum

Reputation: 37875

How to vertical align text next to image

JSFiddle

<div class="container">
    <img style="margin: 10px;" src="~/Content/Images/x.png"  alt="" width="400"  />
    <span style="margin-left: 50px;" class="h3" >Connecting People & Businesses Since 1992</span>
</div>

The above displays just fine in a desktop browser. However, when viewed on a mobile device, the text that should remain to the right of the image wraps underneath the image.

<div class="container">
    <img class="col-md-6" src="~/Content/Images/x.png" />
    <span class="col-md-6 h3" >Connecting People & Businesses Since 1992</span>
</div>

So how do I Bootstrap this? I have tried using a col-md-6 class, but the text on the right no longer is vertically centered after using the grid.

Upvotes: 4

Views: 2359

Answers (2)

Omar
Omar

Reputation: 3030

<div class="container">
    <img class="col-xs-6 col-md-6" src="~/Content/Images/x.png" />
    <span class="col-xs-6 col-md-6 h3" >Connecting People & Businesses Since 1992</span>
</div>

col-md-6 means that everything above 'tablet' size is using 6 out of 12 columns. and everything below that size will revery to the full 12 of 12 because you did not specify anything [thats what you want except you want it all the way down to 'xs' size.

Does that help?

Upvotes: 4

Iqbal Kabir
Iqbal Kabir

Reputation: 1610

You can use a simple two column table.
Apply "vertical-align:middle" to the td element.

Upvotes: 0

Related Questions