为什么字形图标不与同一条带中的其他元素对齐？答案

【问题标题】：Why the glyphicon is not aligning with the rest of the elements in the same strip?为什么字形图标不与同一条带中的其他元素对齐？
【发布时间】：2017-08-20 03:33:04
【问题描述】：

我有 2 个问题-

除了字形图标，如何在 HTML/CSS 中添加小图标？没有引导程序就不可能吗？
为什么我的主字形图标没有像其他元素一样在中间垂直对齐？

提前非常感谢！

这是我的 HTML 代码-

<html>
    <head>
        <title>Tutorial</title>
        <link rel="stylesheet" href="w3.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

        <div class="course_strip">
            <div class="course_strip_left">
                <p class="glyphicon glyphicon-home"></p>
                <p>HTML</p>
                <p>CSS</p>
                <p>JAVASCRIPT</p>
                <p>SQL</p>
                <p>PHP</p>
                <p>BOOTSTRAP</p>
                <p>JQUERY</p>
                <p>ANGULAR</p>
                <p>MORE</p>
            <div class="course_strip_right">
                <p>REFERENCES</p>
                <p>EXAMPLES</p>
            </div>
        </div>
    </body>
</html>

这是 CSS-

*{
     margin:0; 
     padding: 0;
     box-sizing: border-box;
     text-decoration: none;
}

.course_strip{
    background-color: rgba(0,0,0,0.65);
    height: 44px;
    color:#F1F1F1;
    line-height: 44px;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 1px;
    font-family: 'Segoe UI';
}
.course_strip p{
    padding: 0 10px;
}
.course_strip p:hover{
    background-color: #000;
}
.course_strip p:active{
    background-color: green;
}
.course_strip_left p{
    float: left;
}
.course_strip_right p{
    float: right;
}

【问题讨论】：

警告：将box-sizing: border-box; 放在* 选择器上将来可能会导致意外问题。
嗨，Raj - 如果以下答案之一对您来说是“答案”，如果您能接受，那就太好了！我在您的帐户中注意到您没有接受任何答案 - 您知道接受答案后您会赢得声誉吗？回答的人也一样。回顾所有过去的问题并接受对您最有帮助的答案可能对您来说很棒。（点击答案左侧数字下方的灰色大勾号表示接受）。
@cale_b 抱歉，我不知道这个功能，感谢您告诉我。
不客气-无需抱歉！（请记住，您仍然可以处理以前提出的问题并接受它们！）

标签： html css glyphicons

【解决方案1】：

两个问题的答案：

除了 Glyphicons，您还可以使用其他基于字体的图标库，例如 FontAwesome，或者您可以使用图像并将它们嵌入到您的标记中。 Font Awesome 不需要需要一个完整的框架，例如 bootstrap（实际上，neither does Glyphicons）
图标的高度问题是由于字形图标上的行高与其他元素不同。使用浏览器的 Inspector，您会看到您为条带中的所有内容分配了 44px 的行高，但 glyphicon 的行高为 1em。

添加一种样式来处理条带中的字形图标，您会看到它起作用。（见下面修改后的代码）。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

.course_strip {
  background-color: rgba(0, 0, 0, 0.65);
  height: 44px;
  color: #F1F1F1;
  line-height: 44px;
  vertical-align: middle;
  text-transform: uppercase;
  font-size: 20px;
  letter-spacing: 1px;
  font-family: 'Segoe UI';
}

.course_strip p {
  padding: 0 10px;
}

.course_strip p:hover {
  background-color: #000;
}

.course_strip p:active {
  background-color: green;
}

.course_strip_left p {
  float: left;
}

.course_strip_right p {
  float: right;
}

/* Adjust line-height to your desired position */
.course_strip .glyphicon {
  line-height: 34px;
}

<html>

<head>
  <title>Tutorial</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="course_strip">
    <div class="course_strip_left">
      <p class="glyphicon glyphicon-home"></p>
      <p>HTML</p>
      <p>CSS</p>
      <p>JAVASCRIPT</p>
      <p>SQL</p>
      <p>PHP</p>
      <p>BOOTSTRAP</p>
      <p>JQUERY</p>
      <p>ANGULAR</p>
      <p>MORE</p>
      <div class="course_strip_right">
        <p>REFERENCES</p>
        <p>EXAMPLES</p>
      </div>
    </div>
</body>

</html>

【讨论】：

是的，明白了。非常感谢@cale_b

【解决方案2】：

.course_strip 的行高为 44px。为图标设置相同。

.course_strip .course_strip_left p .glyphicon {line-height: 44px;}

【讨论】：

我已经删除了 span 并将其放在 p 标签中，但仍然没有对齐。
我的错。我找到了。这是你给的线高。在图标上给出相同的行高。 @RajMalhotra
现在具体：D

【解决方案3】：

您可以添加此 CSS。

.course_strip >.course_strip_left > p > .glyphicon{
    float: right;
    padding: 10 10px;
}

【讨论】：