Question

我对CSS还是很陌生，在我的一生中，我无法将字体真棒图标居中，因此它始终居于其右侧的文本中心。如果似乎总是比文字高。我从没使用过：before风格，也不确定是DIV_1是问题还是DIV_1：before。

任何关于我在做错事情的建议都将不胜感激。

#DIV_1 {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  padding: 20px 20px 20px 70px;
  font: normal normal normal normal 16px/24px 'Helvetica', sans-serif;
  font-family: 'Helvetica', sans-serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.5em;
  border-left: 8px solid #004285;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  box-shadow: 0 8px 6px -6px gray;
}

#DIV_1:before {
  font-family: "FontAwesome";
  content: "\f05a";
  font-size: 50px;
  font-style: normal;
  color: #004285;
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
}

#P_1 {
  margin: 10px 0px;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="DIV_1">
  <div id="DIV_2">
    <p id="P_1">
      text
    </p>
  </div>

无法将字体真棒图标居中

0 个答案: