在div中左对齐一个元素并使另一个元素居中

Question

我似乎无法使一个元素左对齐，而另一个元素居中在一个div中。

然而，这会将两个元素都居中对齐。如何将Facebook图标左对齐，同时使p元素居中？

.panel-footer {
  text-align: center;
}

.panel-footer .fa-facebook {
  text-align: left;
}

.panel-footer p {
  display: inline-block;
  font-size: medium;
}

<div class="panel-footer">
  <a href="https://www.facebook.com/pg/facebook" target="_blank" class="fa fa-facebook"></a>
  <p>This website is made by ME!</p>
</div>

- nedrathefr

---

@nedrathefr，您是希望整个页面的p文本居中，还是仅在p标签内（减去图标左移的距离）居中？ - Pete

@cale_b - 你能说一下为什么不推荐使用 position: absolute 吗？ - Adam Jenkins

@cale_b 我猜 absolute 应该是这里唯一可行的方法（只是猜测，但考虑下 OP 尝试实现的布局）。我认为将文本居中在其 p 元素内而不是 .panel-footer 内，很难满足所需的布局。我也做了一段时间，知道何时使用 position 和何时不使用 position 需要很长时间学习。不要尝试将其标记为不好，因为它经常被误用。当正确使用时，它不会产生比解决更多挑战，就像我在下面的答案中所做的那样。 - Adam Jenkins

@Adam - 完全同意。我想，如果 OP 对标记有任何控制权，我建议修改标记以创建所需的左、右和中心“容器”，然后使用 flexbox 或 inline-block 很容易解决问题。如果我错误地将 absolute 标记为不好，我很抱歉-我几分钟前确实修改了我的评论来缓和那种情绪，所以如果您仍然认为它读起来是那样，请告诉我。 - random_user_name

Answer 1

我会使用flexbox来实现这个功能：

.panel-footer {
  display:flex;
  flex-wrap:nowrap;
  align-items:center; /* vertical align */
}

.panel-footer p {
  flex-grow:1;       /* take up rest of line */
  text-align:center; /* centre text in p */
}

<div class="panel-footer">
  <a href="https://www.facebook.com/pg/facebook" target="_blank" class="fa fa-facebook">left</a>
  <p>This website is made by ME!</p>
</div>

- Pete

---

这里有点棘手，p 文本在水平方向上并不是严格居中，因为它被图标的大小向左推移了。这符合 OP 的意愿吗？对我来说不太清楚。 - Adam Jenkins

取决于 OP 是否希望它在整行中真正居中还是在其自己的元素中居中 - 我猜测是在其自己的元素中居中。我将根据回复提问并更新我的答案。 - Pete

Answer 2

绝对定位Facebook图标。 确保在左侧的p元素留出足够的填充空间以考虑它（使得p文本不会重叠）。 两侧的填充应该相等，以确保您的p文本不会重叠，并且仍然完美水平居中于.panel-footer内部。

.panel-footer {
  text-align: center;
  position: relative;
}

.panel-footer .fa-facebook {
   position: absolute;
   left:0;
   /* vertically center the icon */
   top: 50%; transform: translateY(-50%);
}

.panel-footer p {
  font-size: medium;
  padding: 0 20px; /* leave space for the icon adjust this value depending on how big your icon is */
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="panel-footer">
  <a href="https://www.facebook.com/pg/facebook" target="_blank" class="fa fa-facebook"></a>
  <p>This website is made by ME!</p>
</div>

- Adam

Answer 3

任何访问此页面的人，现在看来使用Flexbox是最佳选择。

基本上，

<div style="display: flex; justify-content: space-between;">
  <div>Left</div>
  <div>Center</div>
  <div style="width: 100px;"></div> <!-- placeholder; important to give it some width-->
</div>

- Hiro

Answer 4

.float-right {
  float: right;
}

.align-center {
  text-align: center;
  width: 100%;
}

<div class="panel-footer">
    <a href="https://www.facebook.com/pg/facebook" target="_blank" class="fa fa-facebook float-right">Link text</a>
    <p class="align-center">This website is made by ME!</p>
</div>

- Sergey

---

我该如何将 Facebook 图标 左对齐？ - j08691

只需将 float:right 改为 left。您还可以选择创建一个特殊的类，用于居中对齐，如 class="align-center"，然后 .align-center { text-align: center; }， 将此类添加到您的FB图标即可。这就足够了。 - Sergey