为什么这个按钮不在它旁边的同一条线上？

Question

我有一个奇怪的情况，如果一个按钮中有超过一行的文本，它会使它与旁边的一个不对齐。我搞不懂。

Fiddle: http://jsfiddle.net/je821vz9/21/

​

body {
    width: 400px;
}

.prompt-gate {
	margin-top: 25px;
	margin-bottom: 15px;
	background-color: #fefab1;
	border: 1px solid #ffd532;
	padding: 10px;
	text-align: center;
}

.prompt-gate-button {
	background-color: #0E80B4;
	color: white;
	font-size: 12px;
	height: 60px;
	width: 72px;
	border: none;
	margin: 15px 25px;
	outline: none;
	font-style: normal;
	cursor: pointer;
}

.pg-3-buttons {
	margin-top: 10px;
}

.pg-sp2 button {
	margin: 5px 15px;
	width: 120px;
}

<div id="varied-width">
    <div class="pg-sp2 prompt-gate">Did you find what you were looking for?
        <div class="pg-3-buttons">
            <button class="prompt-gate-button" onclick="PromptGate_sp2(1)">Yes</button>
            <button class="prompt-gate-button" onclick="PromptGate_sp2(0)">No, no no nono, no, no no.</button>
            <button class="prompt-gate-button" onclick="PromptGate_sp2(2)">No, I need help.</button>
        </div>
    </div>
</div>

​

为什么右上角的按钮向下移动了几个像素？当你使按钮的文本变短时，例如“一些文本”，它会回到正确的位置。为什么？，怎样才能把它放在正确的位置，用更长的文字？

Answer 1

这是因为您的按钮显示的是inline-block。

默认情况下，内联块元素与其父元素的基线对齐，这意味着其中一个元素越高，它看起来就越偏离行。

要解决这个问题，请使用vertical-align

.prompt-gate-button {
    background-color: #0E80B4;
    color: white;
    font-size: 12px;
    height: 60px;
    width: 72px;
    border: none;
    margin: 15px 25px;
    outline: none;
    font-style: normal;
    cursor: pointer;
    vertical-align:top;
}

JSFiddle演示

Answer 2

因为按钮是内联样式元素，vertical-align的默认值是baseline。只要将vertical-align: middle;设置为按钮，您就不会有问题了。

​

body {
    width: 400px;
}

.prompt-gate {
    margin-top: 25px;
    margin-bottom: 15px;
    background-color: #fefab1;
    border: 1px solid #ffd532;
    padding: 10px;
    text-align: center;
}

.prompt-gate-button {
    background-color: #0E80B4;
    color: white;
    font-size: 12px;
    height: 60px;
    width: 72px;
    border: none;
    margin: 15px 25px;
    outline: none;
    font-style: normal;
    cursor: pointer;
    vertical-align: middle;
}

.pg-3-buttons {
    margin-top: 10px;
}

.pg-sp2 button {
    margin: 5px 15px;
    width: 120px;
}

<div id="varied-width">
    <div class="pg-sp2 prompt-gate">Did you find what you were looking for?
        <div class="pg-3-buttons">
            <button class="prompt-gate-button" onclick="PromptGate_sp2(1)">Yes</button>
            <button class="prompt-gate-button" onclick="PromptGate_sp2(0)">No, no no nono, no, no no.</button>
            <button class="prompt-gate-button" onclick="PromptGate_sp2(2)">No, I need help.</button>
        </div>
    </div>
</div>

​