真棒字体和文本对齐

Question

所以我想让 fontawsome 图标和文本对齐，这样图标就留在左侧，所有文本都在右侧。请看what I have and I what I want to do.

对于我的，您可以看到第二行一直回到左侧。图标在上面的地方。

这是我目前拥有的代码：

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Place your kit's code here -->
    <script src="https://kit.fontawesome.com/74e8323267.js" crossorigin="anonymous"></script>

  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- Ready to use Font Awesome. Activate interlock. Dynotherms - connected. Infracells - up. Icons are go! -->

<div class="container">
  <div class="alert alert-warning">
    <i class="fas fa-exclamation fa-2x fa-fw"></i>&nbsp;<font size="4"><b>In observation of the holiday, LCS website will not have updated guidance on Friday, April 10, 2020. Guidance and updates will resume Monday, April 13, 2020.</font></b>
  </div>

</div>

</body>
</html>

Answer 1

如果您更新 bootstrap 版本，您可以使用其 flex 属性来实现。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

同时将您的元素包装成它们自己的 div 将使您更容易管理它们的间距。

如果你不想更新你的bootstrap，你可以用CSS写同样的东西。

.wrapping-div {
  display: flex;
  align-items: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Place your kit's code here -->
    <script src="https://kit.fontawesome.com/74e8323267.js" crossorigin="anonymous"></script>

  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <!-- Ready to use Font Awesome. Activate interlock. Dynotherms - connected. Infracells - up. Icons are go! -->

  <div class="container">
    <div class="alert alert-warning d-flex align-items-center">
      <div>
        <i class="fas fa-exclamation fa-2x fa-fw"></i>
      </div>
      <div>
       <font size="4"><b>In observation of the holiday, LCS website will not have updated guidance on Friday, April 10, 2020. Guidance and updates will resume Monday, April 13, 2020.</b></font>
      </div>
    </div>
  </div>

</body>
</html>

真棒字体和文本对齐

FontAwsome and Text Alignment

font-awesome

text-alignment