Why do my buttons appear lower than they should do

Question

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>

I dispute that this question is been fully answered before - how to centre contents of a div has been answered, but there is no explanation why these buttons appear **outside** the containing div! — Nikki Locke, Feb 19 '22 at 09:05
There doesn't seem to be anything in any of the duplicates to explain. But further experiments has revealed that the reason is that the outer div is much larger than I think it should be, due to the image - see https://stackoverflow.com/questions/71219755/why-does-including-a-64px-high-image-in-a-div-increase-the-div-height-from-66px — Nikki Locke, Feb 22 '22 at 10:40

Boky · Answer 1 · 2022-02-17T13:38:25.130

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.

Why do my buttons appear lower than they should do

1 Answers1