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/

垂直对齐标签

1 个答案: