Align blocks of table cells both vertically and horizontally

Question

I'm struggling trying to align both vertically and horizontally what should be a CSS keyboard.

I believe I got horizontal aligning right (by specifying width and margin:auto) but I can't understand how to align that vertically.

HTML:

<body>
    <div class="maindocu">
        <div class="keyboard">
            <div class="first_row">
                <div class="key">Q</div>
                <div class="key">W</div>
                <div class="key">E</div>
                <div class="key">R</div>
                <div class="key">T</div>
                <div class="key">Y</div>
                <div class="key">U</div>
                <div class="key">I</div>
                <div class="key">O</div>
                <div class="key">P</div>
            </div>
            <div class="second_row">
                <div class="key">A</div>
                <div class="key">S</div>
                <div class="key">D</div>
                <div class="key">F</div>
                <div class="key">G</div>
                <div class="key">H</div>
                <div class="key">J</div>
                <div class="key">K</div>
                <div class="key">L</div>
            </div>
            <div class="third_row">
                <div class="key">Z</div>
                <div class="key">X</div>
                <div class="key">C</div>
                <div class="key">V</div>
                <div class="key">B</div>
                <div class="key">N</div>
                <div class="key">M</div>
            </div>
        </div>
    </div>
</body>

CSS:

a.maindocu{
 min-height: 100%;
}
.keyboard{
 display: block;
 border-spacing: 5px;
 margin: auto;
 position: relative;
 vertical-align: middle;
}

.first_row{
 display: block;
 margin: auto;
 width: 550px;
}

 .second_row{
 display: block;
 margin: auto;
 width: 490px;
}

 .third_row{
 display: block;
 margin: auto;
 width: 440px;
}

.key{
 display: table-cell;
 width: 50px;
 height: 50px;
 border-spacing: 5px;
 text-align: center;
 vertical-align: middle;
 font-family: "Verdana";
 font-size: 100%;
 color: #ffffff;
 background: #000;
 border: 5px solid #808080;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;

}

JSFiddle: http://jsfiddle.net/fb58bpgj/

I have already read a few tutorials and tips and tricks but I can't figure this out. Any advice?

Thanks in advance!

http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically — Josh Crozier, Feb 22 '15 at 21:01
I meant center, but I believe I sorted it out thanks to Josh's link. I had already tried some of those methods but I was combining them wrong! The first approach did the trick! Thanks — squeck, Feb 22 '15 at 21:12

Align blocks of table cells both vertically and horizontally

0 Answers0