Search code examples
htmlcsscentering

Stacking three divs and centering them vertically?

This question may have already been answered, but I didn't see anything regarding it while searching, and I'm having a hard time understanding the many ways of centering div's.

Basically, I'm building a small portfolio site and would like to have it laid out in a two column format. The left column will house my logo, and the right column will have a series of three links, which I would like to stack vertically and then also center. I cannot for the life of me, figure out the CSS to get this to work. Here's what I have so far:

<div class="row main">
        <div class="col-xs-6 leftMain">
            <img src="img/logo.png" class="logo" alt="myName">
        </div>
        <div class="col-xs-6 rightMain">
           <div class="resume button"><a href="resume.html" class="btn">Resume</a></div>
           <div class="portfolio button"> <a href="portfolio.html" class="btn">Portfolio</a></div>
           <div class="contact button"><a href="mailto:[email protected]" class="btn">Contact</a></div>
        </div>
    </div>

And my CSS:

.main {
    display: flex;
}

.leftMain {
    display: inline-block;

}

.rightMain {
    display: inline-block;

}

.logo {
    display: table;
    margin: 0 auto;
}

.button {
    display: table;
    margin: 0 auto;
}

This works reasonably well, but the links in rightMain do not center vertically. As most of the solutions I've looked up involve the display property, I figured I may as well just ask the full question, rather than trying to integrate multiple solutions for different centering problems. I plan on making it responsive eventually, having the right column move beneath the left on smaller windows. Any ideas?

image

Solution

  • Try this: http://jsfiddle.net/89jyvow0/3/

    Fullscreen: http://jsfiddle.net/89jyvow0/3/show/

    Css:

    * {
    margin: 0;
    padding: 0;
}
html, body {
    min-width: 500px;
    height: 100%;
}
body {
    font-size: 0;
}
.logo, .cont {
    font-size: 1rem;
    min-height: 100%;
    vertical-align: top;
    display: inline-block;
}
.logo {
    position: relative;
    width: 30%;
    background-color: #000;
    color: #fff;
}
.cont {
    position: relative;
    width: 70%;
}
.logo h1 {
    text-transform: uppercase;
    color: #fff;
    font-size: 3rem;
}
.wrap, .logo h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.wrap {
    width: 90%;
    min-width: 300px;
}
.wrap .box {
    text-transform: uppercase;
    margin: 30px 0px;
    width: 100%;
    border: 2px solid;
    padding: 20px;
    font-weight: 900;
    font-family: helvetica;
}