HTML 将图标与徽标对齐答案

【问题标题】：HTML Aligning icons with logoHTML 将图标与徽标对齐
【发布时间】：2022-01-26 03:28:02
【问题描述】：

我遇到了一个问题，我无法让图标正确对齐。如果我删除所有图标的部分，徽标和标题会完美对齐，但是在添加图标时会导致大量问题。抱歉，如果这是一个愚蠢的问题，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

【问题讨论】：

能否在 sn-p 中包含当前“损坏”的 CSS，没有它，html 没有多大用处
嗨@Raxi，我希望我已经包含了正确的内容！由于我使用模板工作，我仍在学习我在做什么的来龙去脉！
是你使用的模板的css和你自己的修改吗？ position 的属性尤其显得格格不入？
这是原始模板中所有未修改的代码（在 main.css 中）在我添加图像之前使用模板时它工作正常！添加图像使我不得不对齐“Oscat Pets”部分，该部分现在工作正常。它只是迫使它不起作用的图标！
是的，我明白了，我在下面的答案之一中添加了一个有效的修复程序。

标签： html alignment vertical-alignment

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

试试下面的。我分成两个 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>

【讨论】：

【解决方案3】：

您展示的模板 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 放在您的样式表中（模板代码下方/之后的某个位置）。

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

【讨论】：

使用它，您还可以删除您当前在徽标图像上使用的内联 CSS（style=... 参数）。

【解决方案4】：

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

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

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

【讨论】：

尝试似乎没有任何改变！不过谢谢！
尝试位置：相对！重要；如果这仍然不起作用，请尝试检查您的图标并对其进行截图
我已在帖子中附加了一张图片“HTML 检查示例”，以帮助指导这一点！同样，他们没有改变！
您能否也检查一下徽标，从我所看到的情况来看，这可能是徽标和图标不在同一行的事实。您希望它位于徽标的右侧，而不是添加一个新行并向右对齐是吗？
尝试通读这篇文章。它可能会解决您的问题stackoverflow.com/questions/14315572/…

【解决方案5】：

您好，感谢大家的反馈和建议！经过大约 6 个小时的尝试很多不同的事情后发现，所缺少的只是 ul 类的一个简单语句：

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 的贡献会被考虑在内，但在进一步操纵该项目时！

感谢大家在我的第一篇文章中如此迅速地支持我！我真的很感激，并且一定会在这个网站上充分参与！

【讨论】：