CODEWITHSUNDEEP
csstwitter-bootstrap-3media
Dika Maheswara
Dika Maheswara

Reputation: 3

Bootstrap 3 css, centering element containing media classes

Centering an element is normally done with the style="display:block;margin:0 auto" or in bootstrap 3 by simply using the center-block class, but somehow this cant be done if you want to center elements containing media class, ie : 

<div class="media">
    <div class="center-block">
        <div class="media-left"><img class="media-object" src="..."></div>
        <div class="media-body">
            <h4 class="media-heading">Header</h4>
            <h5>Info</h5>
        </div>
    </div>
</div>

if I use the text-center class instead, only the media-body gets centered and the media-left element stays solidly in the same place

Upvotes: 0

Views: 2470

Answers (2)

nithin
nithin

Reputation: 163

center-block only centers the block element, so you need to use particular block to used. To center text you have to use as you say text-center. I created this code sample.

HTML:

<div class="block-main col-sm-8 col-sm-offset-2">
   <div class="media">
        <div class="media-left"><img class="media-object center-block" src="http://www.rapidimagephoto.com/wp-content/uploads/2013/10/Nature-Doug-Glidden-3-150x150.jpg"></div>
        <div class="media-body text-center center-block">
            <h4 class="media-heading">Header</h4>
            <h5>Info</h5>
        </div>
    </div>
</div>

CSS:

.block-main{
    background: #f6f6f6;
}

Upvotes: 0

klys
klys

Reputation: 362

While i have not found a way to do it using media bootstrap css, there is a simple way:

<div align = 'center'>
  <img style="vertical-align:middle" src="https://placehold.it/60x60">
  <span style="">Works.</span>
</div>

Here is a demo: https://jsfiddle.net/tj2qx659/

Upvotes: 0

Related Questions