1

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.

eatinasandwich
  • 596
  • 6
  • 22

2 Answers2

2

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;
}
Community
  • 1
  • 1
Yandy_Viera
  • 4,320
  • 4
  • 21
  • 42
1

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/

m0meni
  • 16,006
  • 16
  • 82
  • 141
  • Both answers seem to do the trick. I like the idea of working across browsers and honestly its really not that verbose. Boils down to just a few lines. Thanks! – eatinasandwich Aug 14 '15 at 20:07
  • @eatinasandwich I'm not claiming your checked, you are free to mark the answer that best suits you but ''honestly'' my answer using flex box is not that verbose, it boils down in exactly 2 line of code and it working across all new version browsers check this http://caniuse.com/#feat=flexbox, with the extra solution I just wanted to give you other ways to accomplish what you wanted by the way it even center the content between them if you add more content to your left col you will notice what I'm talking about, it do not have 243 votes up in vain. – Yandy_Viera Aug 14 '15 at 22:34
  • @Yandy_Viera I said **mine** was more verbose, and yours was less verbose. Also if you look all I'm saying is mine is more compatible relatively http://caniuse.com/#feat=css-table – m0meni Aug 15 '15 at 00:02
  • Yes you are right, I misunderstand the @eatinasandwich comment, I had not read your answer, I only read his comment **but** in your way if you add more content to the left `col` you will notice that the right `col` is not vertical aligned, in your example it looks vertical aligned because the content in right `col` is small but it really is not centered, Check this jsfiddle fork from yours, I just add more text to `

    ` https://jsfiddle.net/Yandy_Viera/hc24u24q/

     – Yandy_Viera Aug 15 '15 at 00:45