Question

我有这个按钮列表

HTML：

<button>A</button>
<button>B</button>
<button class="special">C</button>
....

CSS：

button {
    background-color: grey;
    color: #fff;
    border: none;
    border-radius: 2px;
    box-shadow: 1px 1px 0 0.8px #C0CBD1;
    height: 30px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 30px;
    font: 500 16px/36px sans-serif;
}

.special {
    font-size: 30px;
}

jsfiddle

现在我所做的是特殊按钮的字体大小更大。奇怪的是，增加font-size会移动此按钮。我想这都是非常逻辑但无法找到解释（这当然可以帮助我解决这个问题！）

Answer 1

解释是按钮是内联元素，按钮中的文本确定垂直对齐。

内联元素的默认垂直对齐方式是将字符的底部放在文本的基线上。如果您查看示例中的按钮，您会看到字符的底部完全对齐。

如果在按钮周围添加一些文字，您会看到按钮的文字与按钮外的文字对齐：http://jsfiddle.net/Guffa/q640e8sc/4/

如果为按钮指定不同的垂直对齐方式，它们将以不同方式排列。例如，如果您使用vertical-align: middle;，则按钮将在字符的中心对齐，因此按钮的边缘将对齐：http://jsfiddle.net/Guffa/q640e8sc/5/

避免这种对齐的另一种方法是使按钮阻止元素，例如使用float: left;。这使得按钮排成一行，但它当然会使按钮对周围元素的反应不同：http://jsfiddle.net/Guffa/q640e8sc/6/

Answer 2

使用vertical-align：

button {
    background-color: grey;
    color: #fff;
    border: none;
    border-radius: 2px;
    box-shadow: 1px 1px 0 0.8px #C0CBD1;
    height: 30px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 30px;
    font: 500 16px/36px sans-serif;
    display: inline-block;
    vertical-align: top;
}

.special {
    font-size: 30px;
    display: inline-block;
    vertical-align: middle;
}

demo

要对齐中间的文本，您可以使用行高。 demo

font-size更改元素的位置

2 个答案: