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

Question

我有一个奇怪的情况，如果一个按钮中有多行文本，它会使它与旁边的文本不对齐。我无法理解。

小提琴： 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 Demo

Answer 2

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;