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>

我为页脚分隔符类赋予了单边框，使其成为中心分界线。如何使中心线始终位于中心，文本DIV从那里延伸出来。

我尝试将中间页脚页脚文本对齐：居中，并使两个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>

Answer 2

这里有一个答案：http://jsfiddle.net/stackolee/f2ek7c4k/

我添加了一个新课程，将每个div视为一个＆＃39;单元格，这里是CSS：

.wrapper {
    display: table;
}

.cell {
    display: table-cell;
    width: 50%;
    padding: 0 1em;
}

.footer-divider {
    width:0;
    padding: 0;
    border-left: 1px solid;
}

在中心DIV上居中三个DIV

2 个答案: