Question

我正在努力尝试纵向和横向对齐什么应该是CSS键盘。

我相信我的水平对齐方式（通过指定宽度和边距：自动）但我无法理解如何垂直对齐。

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/

我已经阅读了一些教程和技巧和窍门，但我无法解决这个问题。有什么建议吗？

提前致谢！

垂直和水平对齐表格单元格块

0 个答案: