CODEWITHSUNDEEP
htmlcssvertical-alignment
Marijke Luttekes
Marijke Luttekes

Reputation: 1293

Two buttons vertically misaligning, how to align them properly?

I have two buttons, one an A element, another a BUTTON element. They both have the same classes (class="button button--icon"). While I'm applying the same CSS on both of them, using those classes, the buttons don't display the same way.

The difference between both elements is that the A elements are direct children of their containing LIs, but the BUTTON elements are wrapped in a FORM, which is contained in a LI.

The A button's vertical position is higher than that of the BUTTON button's.

These things I've tried, which didn't solve my problem:

Does anyone hav an idea how I can move the A element down, so its top is on the same line as the BUTTON's top?

I've prepared a CodePen with a simplified version of the code, which shows what goes wrong. In case the CodePen goes missing, I've also listed the exact same code at the bottom of this question. http://codepen.io/MHLut/pen/gpOREP?editors=110

The HTML:

<!-- Real world: this UL is normally in a table cell, not a DIV -->
<div class="example">
    <ul>
        <li>
            <a class="button button--icon" href="#">
                <img class="icon" src="http://placehold.it/120x120">
            </a>
        </li>

        <li>
            <form>
                <button class="button button--icon">
                    <img class="icon" src="http://placehold.it/120x120">
                </button>
            </form>
        </li>

        <li>
            <form>
                <button class="button button--icon">
                    <img class="icon" src="http://placehold.it/120x120">
                </button>
            </form>
        </li>
    </ul>
</div>

The SCSS:

html {
    @include box-sizing(border-box);
}

*,
*:before,
*:after {
    @include box-sizing(inherit);
}

small {
    font-size: 0.75em;
    line-height: 1.5em;
}

button,
.button {
    border-radius: 0.125rem;
    background-color: #eee;
    border: 0.1em outset darken(#eee, 5%);
    color: #eee;
    line-height: 1.5em;
    padding: 0.5em 0.75em;
    &:hover, &:focus {}
    &:active {
        border-style: inset;
    }
}

.button {
    display: block;
    text-decoration: none;
}

.button--icon {
    @extend small;
    display: block;
    padding: 0.5em;
    margin-top: 0;
    .icon {
        display: block;
        height: 2em;
        width: 2em;
    }
}

.example {
    ul, form {
        margin-bottom: 0;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
    ul {
        list-style-type: none;
    }
    li {
        display: inline-block;
    }
    .button {
        @extend small;
        margin-top: 0;
    }
}

Upvotes: 4

Views: 8512

Answers (2)

LcSalazar
LcSalazar

Reputation: 16821

When setting up vertical alignment, I always find useful to work with display: table:

http://codepen.io/anon/pen/ZGEJKm

ul {
    list-style-type: none;
    display: table;
}
li {
    display: table-cell;
    vertical-align: middle;
}

Upvotes: 2

Huangism
Huangism

Reputation: 16438

If you set these then they will align. Your list items are inline block items so you need to set vertical align top or else they will align to base-line. I set the forms to have no padding to show you the boxes aligning perfectly

.example {
    form {
        padding: 0; /* you original also have padding top and bottom on form */
    }
    li {
        display: inline-block; /* this you already have */
        vertical-align: top;
    }
}

Upvotes: 5

Related Questions