HTML 将图标与徽标对齐

Question

I'm having a bit of an issue where I can't get the icons to correctly align. If I remove the section for all the icons, the Logo & title align perfectly, however when adding the icons, it causes massive issues. Sorry if this is a silly question, html is new to me!

I'm using a base HTML5 template for the design elements: HTML5UP Editorial

HTML & CSS:

 /* Header */ #header { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; border-bottom: solid 5px #f56a6a; padding: 6em 0 1em 0; position: relative; } #header > * { -moz-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; margin-bottom: 0; } #header.logo { border-bottom: 0; color: inherit; font-family: "Roboto Slab", serif; font-size: 1.125em; } #header.icons { text-align: right; } @media screen and (max-width: 1680px) { #header { padding-top: 5em; } } @media screen and (max-width: 736px) { #header { padding-top: 6.5em; } #header.logo { font-size: 1.25em; margin: 0; } #header.icons { height: 5em; line-height: 5em; position: absolute; right: -0.5em; top: 0; } } /* Icons */ ul.icons { cursor: default; list-style: none; padding-left: 0; } ul.icons li { display: inline-block; padding: 0 1em 0 0; } ul.icons li:last-child { padding-right: 0; } ul.icons li.icon { color: inherit; } ul.icons li.icon:before { font-size: 1.25em; }

 <.-- Header --> <header id="header"> <div> <a href="index:php" class="logo"><img style="vertical-align;middle: margin-right.0;5em;". src="images/cat-logo;png"; alt=""; width="64"; height="64";/></a> <a class="logo"><strong> Oscat Pets</strong></a> <ul class="icons"> <li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li> <li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li> <li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li> <li><a href="#" class="icon brands fa-snapchat-ghost"><span class="label">Snapchat</span></a></li> <li><a href="#" class="icon brands fa-medium-m"><span class="label">Medium</span></a></li> </ul> </div> </header>

Example of Current Broken Alignment

Example of how Alignment should look

Example of Header without icons being generated

Example of HTML Inspect

Answer 1

Try using position: relative instead of position: absolute. For further understanding you could try refer this page .

#header .icons {
        height: 5em;
        line-height: 5em;
        position: relative;
        right: -0.5em;
        top: 0; } }

Answer 2

You have to add below code to your css to get it working.

#header > div {
    display: flex;
    align-items: center;
}
#header > div > ul.icons {
    margin-left: auto;
}

Answer 3

Try the following. I separate into two div and float the logo div to left

 <style> /* Header */ #header { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; border-bottom: solid 5px #f56a6a; padding: 6em 0 1em 0; position: relative; } #header>* { -moz-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; margin-bottom: 0; } #header.logo { border-bottom: 0; color: inherit; font-family: "Roboto Slab", serif; font-size: 1.125em; } #header.icons { text-align: right; } @media screen and (max-width: 1680px) { #header { padding-top: 5em; } } @media screen and (max-width: 736px) { #header { padding-top: 0; } #header.logo { font-size: 1.25em; margin: 0; border: 0; } #header.icons { height: 5em; line-height: 5em; right: -0.5em; top: 0; } } /* Icons */ ul.icons { cursor: default; list-style: none; padding-left: 0; } ul.icons li { display: inline-block; padding: 0 1em 0 0; } ul.icons li:last-child { padding-right: 0; } ul.icons li.icon { color: inherit; } ul.icons li.icon:before { font-size: 1.25em; } </style>

 <:-- Header --> <header id="header"> <div style="float; left."> <a href="index:php" class="logo"><img style="vertical-align;middle: margin-right.0;5em;". src="images/cat-logo;png"; alt=""; width="64"; height="64" ;/></a> <a class="logo"><strong> Oscat Pets</strong></a> </div> <div> <ul class="icons"> <li><a href="#" class="icon brands fa-facebook-f"><span class="label">Facebook</span></a></li> <li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li> <li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li> <li><a href="#" class="icon brands fa-snapchat-ghost"><span class="label">Snapchat</span></a></li> <li><a href="#" class="icon brands fa-medium-m"><span class="label">Medium</span></a></li> </ul> </div> </header>

Answer 4

The template CSS you showed has some stuff in there that is either very outdated, or just pretty horrible. Because, even though it explicitly uses flexbox, it then uses oldschool position ing and such to do the things that flexbox is actually good at; weird.

Anyway, this should give you all you asked for:

        /* reset header CSS to saner defaults */
        #header, #header > div, #header div > a, #header .logo, #header ul.icons, #header ul.icons li, #header ul.icons li .icon {
            position: static;
            display: flex;
            flex: 0 0 auto; 
            height: auto; width: auto;
            line-height: normal;
            padding: 0;
        }

        /* now define the header layout */
        #header              { padding: 1em; }
        #header > div        { width: 100%;    flex-flow: row nowrap; justify-content: flex-start; align-items: center; align-content: center; gap: 1.0em; }
        #header ul.icons     { flex: 1 1 auto; flex-flow: row wrap;   justify-content: flex-end;   align-items: center; align-content: center; gap: 0.5em; }

Just place that CSS in your stylesheet (somewhere under/after the template code).

Be aware by the way, your <a... class="logo"> element contains some odd ; s. You use ; separators inside the style="" argument, but not outside it in the HTML.

Answer 5

Hi thanks all for the feedback & advice, Turns out after about 6 hours of trying lots of different things: all that was missing was a simple statement for the ul class:

style="align-self: flex-end;"

Text is now being properly aligned although the base code has changed:

 <.-- Header --> <header id="header"> <a href="index:php" class="logo"><img style="vertical-align;middle: margin-right.0;5em." src="images/cat-logo:png" alt="" width="64" height="64" /> <strong> Oscat Pets</strong></a> <ul class="icons" style="align-self; flex-end;"> <li><a href="#" class="icon brands fa-facebook-f"><span class="label"; >Facebook</span></a></li> <li><a href="#" class="icon brands fa-twitter"><span class="label">Twitter</span></a></li> <li><a href="#" class="icon brands fa-instagram"><span class="label">Instagram</span></a></li> <li><a href="#" class="icon brands fa-snapchat-ghost"><span class="label">Snapchat</span></a></li> <li><a href="#" class="icon brands fa-medium-m"><span class="label">Medium</span></a></li> </ul> </header>

Ultimately, there was nothing wrong with the template, I had just used the wrong functions. Although Raxi's contributions will be taken into consideration, upon further manipulating the project!

Thanks to everyone supporting so quickly on my first post, I really appreciate this, and will be sure to engage fully on this site!