'Why do my buttons appear lower than they should do [duplicate]

I am trying to make an html page with a fixed header at the top, containing an icon and some buttons.

But the buttons appear in the wrong place, as if they were outside the containing header.

Any idea why this is, and what I can do about it?

<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
header {
    margin: 0px -8px -8px -8px;
    position: fixed;
    width: 100%;
    background-color: #395FAA;
    color: white;
}

#heading {
    height: 66px;
    line-height: 66px;
    vertical-align: middle;
}

#heading button {
    height: 50px;
    width: 100px;
    color: white;
    background-color: #2A477F;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
}

#content {
    height: 2000px;
}
</style>
</head>
<body>
<header>
    <div id="heading">
        <img src="https://icons.iconarchive.com/icons/ampeross/qetto/64/icon-developer-icon.png">
        <button href="/home/default.html">Services</button>
        <button href="/xrgroups/default.html">Groups</button>
Some text here
    </div>
</header>
<div id="content">
</div>
</body>
</html>
htmlcss


Solution 1:[1]

If you add

display: flex;
align-items: center;
gap: 10px; (optional - to have space between elements)

to #heading it will work.

header {
    margin: 0px -8px -8px -8px;
    position: fixed;
    width: 100%;
    background-color: #395FAA;
}

#heading {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 66px;
    line-height: 66px;
    vertical-align: middle;
}

#heading button {
    height: 50px;
    width: 100px;
    color: white;
    background-color: #2A477F;
    font-weight: bold;
    text-transform: uppercase;
    border: none;
}

#content {
    height: 2000px;
}
<body>
<header>
    <div id="heading">
        <img src="https://icons.iconarchive.com/icons/ampeross/qetto/64/icon-developer-icon.png">
        <button href="/home/default.html">Services</button>
        <button href="/xrgroups/default.html">Groups</button>
    </div>
</header>
<div id="content">
</div>
</body>

Here is the fiddle.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions