CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
user3069359
user3069359

Reputation: 1

Vertically centering an image and a text

I am using Twitter Bootstrap and its grid layout and in one column I am trying to get an image pulled to the right and a text pulled to the right next to the image as well while they should both be vertically centered. With the image it's easy - I made the class img-responsive and added padding to that column and a pull-right to the image so it sits well, however the text doesn't seem to center whatever I try.

I tried applying this to the column:

.center{
    display : table-cell;
    vertical-align : middle;
    float:none;
}

and it seemed to work when there's only text, however with the image included it won't.

Here is my code for the column:

<div class="col-md-3 col-xs-6 col-md-push-4 equalcolumn" id="namecolumn">
        <img class="pull-right img-circle img-responsive" id="myimage" src="http://upload.wikimedia.org/wikipedia/en/0/03/Super_Mario_Bros._box.png" alt="">
        <h4 class="pull-right" id="nametext">Welcome!</h4>
</div>

And CSS:

#namecolumn {
    padding: 1vh; 
}
.img-responsive {
height: 100%;
margin: 0 auto;
}

Thanks!

Upvotes: 0

Views: 191

Answers (3)

user3521997
user3521997

Reputation: 1

If you want to vertically center float elements like col-md-3 and so on use this example http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

Upvotes: 0

Kevin Lynch
Kevin Lynch

Reputation: 24721

You will need to cretae 2 wrapper divs that have a value of display: table and display: table-cell. Then you can use vertical-align: middle.

DEMO http://jsfiddle.net/Fa8Xx/1750/

CSS

.wrapper {
    height: 100%;
    display: table;
}
.wrapper-inner {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

HTML

<div class="wrapper">
    <div class="wrapper-inner">
    <div class="col-md-3 col-xs-6 col-md-push-4 equalcolumn" id="namecolumn">
        <img class="pull-right img-circle img-responsive" id="myimage" src="http://upload.wikimedia.org/wikipedia/en/0/03/Super_Mario_Bros._box.png" alt="" />
        <h4 class="pull-right" id="nametext">Welcome!</h4>
    </div>
</div>

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 106048

h4 is a block element, so set it as inline-block and give vertical-align:middle; to both img and h4 , so they center to each other on the baseline. 

#myimage, #nametext {
    display:inline-block;/* defaut display of img tag */
    vertical-align:middle;
}

Upvotes: 1

Related Questions