html - 在中心 DIV 上居中放置三个 DIV

Question

高。我在页脚中有三个 DIV。一个 DIV 文本，一条垂直线，和另一个 DIV 文本。我希望中心线始终位于页面的中心，即使两个文本 div 的长度可能不同。

<footer id="center-footer" class="clearfix">
<div class="wrapper">
    <div class="legalese alpha">
        <p>Follow Along on  <a href="#">Instagram</a> and <a href="#">Pinterest</a></p>
    </div>
    <div class="footer-divider"></div>
    <div class="legalese alpha">
        <p>See my new online course</p>
    </div>
</div>

我给 footer-divider 类一个单一的边框，让它成为一个中心分界线。我怎样才能使中心线始终位于中心并且文本 DIV 从那里延伸。

我试过使 center-footer footer text-align:center，并使两个 div 文本左右对齐，但它只是使整个部分居中。

谢谢。

Answer 1

由于您只使用中间的 div 作为分隔线，从技术上讲，您只需要两个 div 而不是 3 个。为什么不像下面的示例那样将每边设为 50% 并在中间放置一个边框:

div{
  box-sizing: border-box;
  float: left;
  width: 50%;
}

footer div:first-child{
  border-right: 1px solid black;
}

footer div:last-child{
  text-align: right;
}

<footer>
  <div>left side</div>
  <div>right side</div>
</footer>