css - 垂直对齐标签

Question

我有一个标签，我将其样式设置为看起来像一个按钮。我遇到的问题是，当高度被扩展以匹配带有更多文本的标签时，文本没有垂直对齐。我希望两个标签的高度相等，中间有垂直对齐的文本。正如您在演示中看到的，文本对齐方式也没有居中。另外，您将如何在两个表格单元格之间添加间距？我最初让容器为 100%，每个标签为 49%，两个标签之间有 1% 的边距。

http://jsfiddle.net/jasonniebauer/e5dg6/2/

更新:

HTML

<div id="table6">
<input type="radio" id="online_paper2" name="tax_forms"/>
<label for="online_paper2">
        Online + Paper
</label>
<input type="radio" id="online_only2" name="tax_forms"/>
<label for="online_only2">
    Online Only
</label>
</div>

CSS

#table6 {
    width: 15rem;
}

#table6 input[type="radio"] + label {
            box-sizing:border-box;
            padding: 1rem 3rem 1rem 3rem;
            width: 49%;
            display: inline-block;
            color: #BDC3C7;
            background-color: #F2F2F2;
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            border-radius: 3px;
            margin-bottom: 1rem;
            font-size: 1.125em;
        }

input[type="radio"] {
    display: none;
}

Answer 1

您可以通过在包装元素上使用 display: table 并在子元素上使用 display: table-cell 来获得所需的结果。

查看更新后的 jsfiddle: http://jsfiddle.net/e5dg6/3/