Question

我似乎无法将一个元素对齐到左边，另一个元素与div中的中心对齐。

但是，这会将两个元素对齐到中心。如何将Facebook图标对齐到左侧，同时将p元素居中？

＆＃13;

.panel-footer {
  text-align: center;
}

.panel-footer .fa-facebook {
  text-align: left;
}

.panel-footer p {
  display: inline-block;
  font-size: medium;
}

＆＃13;

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

＆＃13;

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

Facebook图标的绝对位置。确保在p元素的左侧留下足够的填充以说明它（以便p文本不与其重叠）。使两边的填充相等，以确保p文本没有重叠，并且它仍然完全水平居中于.panel-footer

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

Answer 3

我会使用flexbox：

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

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

左对齐一个元素并将div中的另一个元素居中

4 个答案: