1

I have a weird situation in that if a button has more than one line of text in it, it puts it out of alignment with the one next to it. I can't figure it out.

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>

Why on earth is the top-right button moved down a few pixels? When you make the text of the button shorter, e.g. "some text" it goes back to the correct position. WHY? How do I make it stay in the correct place with longer text?

AlbatrossCafe
  • 1,710
  • 6
  • 26
  • 49

2 Answers2

4

This is happening because your buttons are display inline-block.
By default inline-block elements are aligned to the baseline of its parent, which means that the taller one of the elements is, the more out of line it will look.
To solve this, use 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

Jacob G
  • 13,762
  • 3
  • 47
  • 67
1

Because the buttons are inline style elements, and the default value for vertical-align is baseline. Just set vertical-align: middle; to the buttons and you won't have a problem.

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>