CODEWITHSUNDEEP
csstwitter-bootstrap
eatinasandwich
eatinasandwich

Reputation: 636

Vertical Centering issue with bootstrap

I feel like I should have found an answer to this by now but I want to center two adjacent div sections within the same container. Here is the fiddle https://jsfiddle.net/ax8zch73/

I've tried multiple variations of margin auto type fixes, setting the top and bottom attributes, vertical-align(which never works for me anyways), and I can't seem to get the two blocks of content centered vertically. Not sure if I need extra container layers or if I'm missing something obvious.

The markup:

<div class="mycontainer">
    <div class="col-xs-7 col-sm-8 col-md-9">
        <h3>Welcome</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        </p>
        <p>
            <a href="#"><span class="badge badge-see-more">Learn More</span></a>
        </p>
    </div>
    <div class="col-xs-5 col-sm-4 col-md-3">
        <img class="circle-img" src="http://placehold.it/100x100"/>
    </div>
</div>

This isn't nested in anything. I just have a few of these containers as just sections of content to scroll through.

The css:

.badge {
    background: none;
    border: 1px solid blue;
    border-radius: 15px;
    color: blue;
    font-weight: 100;
    font-size: 14px;
    padding: 5px 18px;
    margin-top: 12px;
}

.mycontainer {
    max-width: 50%;
    width: 800px;
    min-height: 200px;
    margin: 0 auto;
    border: 1px solid black;
}

.circle-img {
    border-radius: 50%;
    height: 100%;
    padding: 10px;
}

I've tried this with and without the bootstrap grid with no success and don't feel like I need to use it if something better is suggested. The badge class shouldn't affect much but is a customized version of the bootstrap badges.

Upvotes: 1

Views: 71

Answers (2)

m0meni
m0meni

Reputation: 16455

The answer below mine is better.

You can also use the table-center method for vertical centering which is more compatible across browsers than flexbox, albeit being more verbose. It requires you to set the display: table on your container and add a div to contain your other divs.

CSS:

.mycontainer {
    max-width: 50%;
    /*ADD THIS*/ display: table;
    min-height: 200px;
    margin: 0 auto;
    border: 1px solid black;
}

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

HTML:

<div class="mycontainer">
    <div class="table-cell"> <!-- ADD THAT -->
        <div class="col-xs-7 col-sm-8 col-md-9">
             <h3>Welcome</h3>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <p> <a href="#"><span class="badge">Learn More</span></a>

            </p>
        </div>
        <div class="col-xs-5 col-sm-4 col-md-3">
            <img class="circle-img" src="http://placehold.it/100x100" />
        </div>
    </div>
</div>

https://jsfiddle.net/ax8zch73/3/

Upvotes: 1

Yandy_Viera
Yandy_Viera

Reputation: 4380

You can use flex box like this:

.mycontainer {
    max-width: 50%;
    width: 800px;
    min-height: 200px;
    margin: 0 auto;
    border: 1px solid black;

    display: flex;
    align-items: center;
}

Here a working jsfiddle fork from yours.

Check this out for more info: http://getbootstrap.com.vn/examples/equal-height-columns/

Or you can use one of this two solution of this answer How can I make Bootstrap columns all the same height?

.mycontainer{
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

or 

.mycontainer{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Upvotes: 2

Related Questions