在 div 中左对齐一个元素并将另一个元素居中答案

【问题标题】：Left align one element and center another element in div在 div 中左对齐一个元素并将另一个元素居中
【发布时间】：2019-04-16 04:37:12
【问题描述】：

我似乎无法让一个元素与左对齐，而另一个元素与 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 您希望 p 中的文本在整个页面宽度上居中还是在 p 中居中（减去由于图标而向左移动的量）？
@cale_b - 想说为什么你推荐反对position: absolute？
@cale_b 我冒险猜测absolute 实际上是去这里的唯一方法（只是猜测，但考虑一下 OP 试图实现的布局）。我认为通过将文本居中于p 元素而不是.panel-footer 中，不太可能满足所需的布局。我也已经这样做了一段时间，并且知道需要很长时间才能准确了解何时使用position 以及何时不使用position。不要试图将其标记为坏的，因为它经常被滥用。如果使用得当，它所带来的挑战不会多于解决的挑战，正如我在下面的回答中所做的那样。
@Adam - 完全同意。我想以我的思维方式，如果 OP 对标记有任何控制权，我建议修改标记以创建所需的左、右和中心“容器”，然后问题很容易解决使用 flexbox 或 inline-block。如果我错误地将绝对标记为坏，我深表歉意 - 我在几分钟前确实修改了我的 cmets 以缓和这种情绪，所以如果你仍然认为它是这样读的，请告诉我。

标签： html css

【解决方案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>

【讨论】：

这里很棘手，p 文本在技术上不是水平居中的，因为它是从左侧按图标大小推动的。这是OP想要的吗？我不清楚。
取决于 OP 是否希望它真正居中于整行或它自己的元素内——我猜测它是在它自己的元素内。我会提出问题并根据回复更新我的答案

【解决方案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>

【讨论】：

【解决方案3】：

.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>

【讨论】：

"如何将 Facebook 图标 左对齐"
只需将float: right 切换到左侧。另外作为一个选项，您可以为中心对齐创建特殊类，例如 class="align-center" 然后 .align-center { text-align: center; } 将此类添加到您的 fb 图标。够了。

【解决方案4】：

对于任何遇到此页面的人来说，现在的方法似乎是使用 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>

【讨论】：