CODEWITHSUNDEEP
htmlcss
Spark323
Spark323

Reputation: 1585

Adding padding causes vertical alignment issues

I have a header that contains two hrefs on the left and a navbar on the right. I'm having issues getting everything to be vertically aligned middle. I've gone through the million questions regarding vertical alignment issues but nothing has fixed my issue.

If I add padding to the menu label, the hrefs are no longer vertically aligned by middle. If the padding for the menu is 0, everything is aligned fine. Does navbar need a height and width? 

.menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    background: #19c589;
    display: block;
    float: right;
    margin-right: 100px;
    border: red 3px solid;
    padding: 10px 0;
    vertical-align: middle;
}

#header nav{
    display:inline;
}
#header {
    background: gray;
    padding: 28px 0 26px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;

}
a[href="#top"] {
    margin-left:100px;
    margin-right:50px;
    vertical-align: middle;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
}
a img{
   vertical-align:middle;
}
a, a:visited{
     color: white;
}
<body>
    <header id="header"> 
        <a href="#top">Test</a>
        <a href="">
            <img src="" alt="img" height="24" width="24">
        </a>
        <nav id="navbar">
        	<label class="menu">Menu</label>
        </nav>
    </header>

</body>
</html>

Upvotes: 1

Views: 614

Answers (1)

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9457

edited fiddle This should work for you https://jsfiddle.net/5f3pbg8b/13/

note: You cannot use vertical-align: middle; with a floated element, this is because floated elements are aligned to the top, you can read more about it here https://www.w3.org/TR/CSS21/visuren.html#floats

.menu {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    color: #fff;
    background: #19c589;
    position: absolute;/* new */
    right: 0;/* new */
    margin-right: 100px;
    border: red 3px solid;
    padding: 10px 0;
    margin-top: -10px;/* new */
}

Upvotes: 1

Related Questions