html - 居中元素然后左右放置其他元素而不改变原始中心

Question

我有三个元素。

我想将页面的中间元素居中，然后:

• 将右边的元素放在中间元素的右边
• 将左侧元素放在中间元素的左侧

这一切都必须在不移动原始中心的情况下完成，无论 L/R 元素有多宽!

我已经有 CSS (text-align:center/margin: 0 auto) 将全部三个居中，但这取决于 L 的宽度/R 元素。我希望宽度无关紧要。

<nav>
  <span class="left">left</span>
  <span class="middle">middle</span>
  <span class="right">right is a longer width perhaps</span>
</nav>

nav {
  text-align: center;
}

---

正确

---

不正确

Answer 1

演示:http://jsbin.com/xenuyo

HTML

   <ul class="center-me">
      <li><span>80863 Photosdfdfd</span></li>
      <li><span>Someone verylongname</span></li>
      <li><span>Some other Category</span></li>
    </ul>
  

   <ul class="center-me">
      <li><span>80863 Photosdfdfd</span></li>
      <li><span>Verylongname Unbreakingsurname</span></li>
      <li><span>Some other CategoryCould beverylongtooSome other CategoryCould beverylongtoo</span></li>
    </ul>

CSS

.center-me {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    position: relative;
    margin: 0 auto;
    text-align: center;
}


@media (min-width:550px) { 
    .center-me {
        max-width: 500px;
    }
    .center-me li:not(:first-child) {
        box-sizing: border-box;
        float: left;
        position: relative;
        width: 50%;
    }
    .center-me li:nth-child(even) {
        text-align: right;
        padding-right: 16%;
    }
    .center-me li:first-child {
        text-align: center;
        left: 0;
        right: 0;
        position: absolute;
    }
    .center-me li:last-child {
        padding-left: 16%;
        text-align: left;
    }
    .center-me li span {
        padding: 10px 0;
        position: relative; 
        display:block;
    }
    .center-me li:nth-child(even) span:before,
    .center-me li:last-child span:before {
        content: '';
        position: absolute;
        width: 1px;
        top: 0;
        bottom:0;
    }
    .center-me li:nth-child(even) span:before {
        right: -10px;
        border-right: 1px solid red;
    }
    .center-me li:last-child span:before {
        border-left: 1px solid red;
        left: -10px;
    }
}