Two buttons are vertically mismatched, how do I align them correctly?
I have two buttons, one is A element, the other is BUTTON element. They both have the same classes ( class="button button--icon"
). Although I am applying the same CSS for both of them using these classes, the buttons do not appear the same.
The difference between both elements is that A elements are direct children of their containing LI, but BUTTON elements are enclosed in FORM, which is contained in LI.
The vertical position of the A button is greater than that of the BUTTON button.
These things I tried that didn't solve my problem:
- Hard coding all font sizes up to 16px;
- Applying margins or paddings to containing LI and As, separately (this just moved my entire UL down)
- Apply equal vertical margin for both A and BUTTON.
- Wrapping A in the form (no effect since I have no style in FORM)
-
display: block !important;
-
vertical-align: baseline;
- Remove ads to select box sizes
Does anyone know how I can move element A downwards so that the top of it is on the same line as the top of the BUTTON?
I prepared a CodePen with a simplified version of the code that shows what is going wrong. In the absence of CodePen, I have also provided the same code at the end of this question. http://codepen.io/MHLut/pen/gpOREP?editors=110
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>
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;
}
}
source to share
If you set them, they will be aligned. Your list items are inline block elements, so you need to set vertical alignment or they will be baseline aligned. I've set up the forms to have no padding to show you the perfect margins.
.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;
}
}
source to share
When adjusting vertical alignment, it is always helpful 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;
}
source to share