HTML 将图标与徽标对齐

Question

我遇到了一些问题，我无法让图标正确对齐。如果我删除所有图标的部分，徽标和标题会完美对齐，但是在添加图标时，会导致大量问题。对不起，如果这是一个愚蠢的问题，html 对我来说是个新问题！

我正在为设计元素使用基础 HTML5 模板：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

尝试使用 position: relative 而不是 position: absolute。

如需进一步了解，您可以尝试参考此 page。

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

Answer 2

您必须将以下代码添加到您的 css 才能使其正常工作。

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

Answer 3

尝试以下操作。我分成两个 div 并将徽标 div 浮动到左侧

<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

您展示的模板 CSS 中有些内容要么非常过时，要么非常糟糕。因为，即使它明确地使用了 flexbox，它也会使用 oldschool positioning 之类的东西来做 flexbox 实际上擅长的事情；奇怪。

无论如何，这应该能满足您的所有需求：

        /* 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; }

只需将 CSS 放在您的样式表中（某处 under/after 模板代码）。

请注意，您的 <a ... class="logo"> 元素包含一些奇怪的 ;。您在 style="" 参数内使用 ; 分隔符，但在 HTML.

参数外不使用

Answer 5

您好，感谢大家的反馈和建议！经过大约 6 个小时的尝试很多不同的事情后，结果是缺少了一个简单的 ul class:

语句

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

尽管基本代码已更改，但文本现在已正确对齐：

<!-- 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>

最终，模板没有问题，我只是使用了错误的功能。尽管将考虑 Raxi 的贡献，但在进一步操纵该项目时！

感谢大家对我的第一个 post 这么快的支持！我真的很感激，一定会充分参与这个网站！

HTML 将图标与徽标对齐

HTML Aligning icons with logo

html

alignment

vertical-alignment