中心元素然后左右放置其他元素而不更改原始中心

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

---

CORRECT

---

不正确

Answer 1

我认为我已经实现了你想要做的事情，请检查：

＆＃13;

＆＃13;

h1 {
    text-align: center;
}
span.right {
    width: 40%;
    float: right;
    text-align: left;
}
span.middle {
    display: inline-block;
    width: 20%;
}
span.left {
    width: 40%;
    float: left;
    text-align: right;
}
nav {
    text-align: center;
}

＆＃13;

<h1>Heading</h1>

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

＆＃13;

＆＃13;

＆＃13;

无论您在左侧或右侧middle标记内添加了多少内容，span始终保持居中。它上方的标题居中，因此您可以将其用作标记进行检查。

以下是左侧和右侧span标记内容较多的示例，中间仍保持居中：

＆＃13;

＆＃13;

h1 {
    text-align: center;
}
span.right {
width: 40%;
float: right;
text-align: left;
}
span.middle {
display: inline-block;
width: 20%;
}
span.left {
width: 40%;
float: left;
text-align: right;
}
nav {
    text-align: center;
}

＆＃13;

<h1>Heading</h1>

<nav>
  <span class="left">Lorem ipsum dolor ismet</span>
  <span class="middle">middle</span>
  <span class="right">right is a longer width perhaps, yes why not, more content is here.</span>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 2

DEMO：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;
    }
}

Answer 3

无论文字大小如何，这都应该有效，包括像＆＃34; adsfasdfakajdsckfjdbsuacbkfacf＆＃34;

<ul class="center-me">
  <li>asdfasdfasdfasdfasdfadsfasdf 1</li>
  <li>wertwertwertwertwertwetrwetr 2</li>
  <li>zxcvzxcvzxcvzcxvzxcvzxcvzxcv 3</li>
</ul>

.center-me {
   list-style:none;
   text-align:center;
   margin:0;
   padding:0;
   width:100%;
}

.center-me li {
    display:inline-block;
    width: 50px;
    word-wrap: break-word;
}

您可以根据需要调整属性。

编辑： 工作版http://jsfiddle.net/ryuushinigami/r4Ldo3gh/