Laurent Laurent - 3 months ago 10
CSS Question

Why my buttons and my text box are not well aligned?

I have created a simple html file containing 2 buttons and one text box.

What I don't understand is that the height of my various elements is set equally to 20px for all elements, but they don't seem to be very well aligned (vertically). Even more frustrating, I was expecting my + and - buttons to be center aligned both on the vertical and the horizontal axis.

Do you have any idea what I have missed ?

enter image description here

Many thanks for your kind help.

Contents of 'form.html' :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Form | 24ways.org</title>
<link rel=stylesheet href=style.css>
<script>
</script>
</head>

<body>
<input type="text" name="country" class="resizedTextbox" value="20" readonly>

<a href="#" class="myButton">+</a>
<a href="#" class="myButton">-</a>
</body>
</html>


Contents of 'style.css' :

.myButton {
-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
box-shadow:inset 0px 1px 0px 0px #54a3f7;
background-color:#3e12cc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #0815cc;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:18px;
padding: 0 10px 10px 10px;
text-decoration:none;
text-shadow:0px 1px 0px #154682;
width:20px;
height:20px;
}
.myButton:hover {
background-color:#0061a7;
}
.myButton:active {
position:relative;
top:1px;
}
.resizedTextbox {width: 50px;
height: 20px;
padding: 0 10px 10px 10px;
border-color:#3e12cc;
text-shadow:0px 1px 1px #154682;
background-color:#f5effb;
}

Answer

You are not accounting for the 2px top and bottom border on the input field, add 2px to the height of the buttons. https://jsfiddle.net/u8v3rgyt/4/

 .myButton {
    -moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;
    -webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;
    box-shadow:inset 0px 1px 0px 0px #54a3f7;
    background-color:#3e12cc;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    border:1px solid #0815cc;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:18px;
    padding: 0 10px 10px 10px;
    text-decoration:none;
    text-shadow:0px 1px 0px #154682;
    width:20px;
    height:22px;
}