Search code examples
htmlcssbuttonalignment

Why aren't these different button types lining up?

I have a and an on my page. However, I cannot seem to get these buttons to line up.

html

<div class="doubleButtonContainer">
    <button class="moreAnswersButton" name="more_answers" onclick="showAllAnswers()">More answer fields...</button>
    <input type="submit" class="button" name="submit" value="Finish" />
</div>

css

.moreAnswersButton, .button
{
    height: 50px;
    width: 125px;
    text-align: center;
    border-radius: 5px;
    padding: 0;
}

.doubleButtonContainer
{
    height: 70px;
    text-align: center;
    width: 325px;
}

JSFiddle Link

Solution

  • Add 'vertical-align' property to your to your buttons. 

    .moreAnswersButton, .button
    {
        height: 50px;
        width: 125px;
        text-align: center;
        border-radius: 5px;
        padding: 0;
        vertical-align: bottom;
    }

    (the value can be bottom, middle or top. it's your preference)