html - 左对齐一个元素并使 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>

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>