Utilizing Twitter Bootstrap's grid layout, I am attempting to align an image to the right and text beside it while ensuring both are vertically centered within a single column. While adjusting the image with the "img-responsive" class and adding padding resulted in successful alignment, the text remains uncentered.
I attempted to center the text by applying the following CSS code snippet to the column:
.center{
display : table-cell;
vertical-align : middle;
float:none;
}
This approach worked when only text is present in the column, but failed when including an image as well.
Below 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>
Corresponding CSS:
#namecolumn {
padding: 1vh;
}
.img-responsive {
height: 100%;
margin: 0 auto;
}
Your help is greatly appreciated!