如何将Font Awesome图标右对齐？尝试text-align:right无效

嘿，我来帮你搞定这个布局问题！你遇到的核心问题是：text-align: right是用来对齐元素内部的内容，而不是让元素本身靠右对齐。你的图标是一个inline-block元素，它自身的宽度只够容纳图标，所以给它加这个属性完全起不到让它靠右的效果。

下面给你两种简单有效的解决方案，优先推荐第一种现代布局方式：

方法1：使用Flexbox（最推荐） #

Flexbox是现在处理这类两端对齐布局最简洁的方式，只需要给父容器.top-container设置几个属性就能实现：

body { margin: 0; }

.top-container {
  padding: 20px;
  margin: 0;
  width: 100%;
  color: rgb(255, 255, 255);
  background-color: rgba(0, 0, 0, 0.75);
  font-size: 2em;
  font-weight: bold;
  /* 新增Flex属性 */
  display: flex;
  justify-content: space-between; /* 让子元素分别靠左右两端 */
  align-items: center; /* 垂直居中对齐，避免标题和图标高度不一致的问题 */
  box-sizing: border-box; /* 防止padding撑宽容器 */
}

.top-container i {
  color: red;
}

.top-container h2 {
  margin: 0; /* 去掉h2默认的上下margin，避免容器高度被撑开 */
}

对应的HTML保持不变：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div class="top-container">
  <h2>Website Title</h2>
  <i class="fas fa-bars"></i>
</div>

方法2：使用Float（兼容旧浏览器） #

如果你需要兼容一些不支持Flexbox的旧浏览器，可以用浮动的方式：

body { margin: 0; }

.top-container {
  padding: 20px;
  margin: 0;
  width: 100%;
  color: rgb(255, 255, 255);
  background-color: rgba(0, 0, 0, 0.75);
  font-size: 2em;
  font-weight: bold;
  overflow: hidden; /* 清除浮动，避免容器高度塌陷 */
  box-sizing: border-box;
}

.top-container i {
  color: red;
  float: right; /* 让图标靠右浮动 */
}

.top-container h2 {
  margin: 0;
  display: inline-block;
}

为什么你的原代码不生效？ #

再给你解释下原代码的问题：你给.top-container i加了text-align: right，但这个属性是控制图标内部内容的对齐方式，而图标本身就是一个单一的图标元素，没有内部内容可以对齐，所以这个属性完全没用。要让元素本身靠右，需要改变它在父容器中的布局位置，而不是调整它内部的对齐。

内容的提问来源于stack exchange，提问作者Brandon LearnsAlot