CSS：如何围绕中心元素对齐元素？

Question

我正在尝试创建一个由三部分组成的简单页面导航：

1. 前几个页码（如果有）
2. 当前页码（必须居中）
3. 一些即将出现的页码（如果有）

重要的是当前页码始终在父容器中水平居中。其他两个部分应该平均占用剩余的水平空间。

JSFiddle 说明了我解决此问题的两次尝试。

解决方案 1：使用 text-align: center。这可以达到预期的效果，但前提是两侧的宽度相等。如果不是，当前页码将不在中心。

HTML

<div class="container">
  <input type="button" value="47">
  <input type="button" value="48">
  <input type="button" value="49">
  <input type="text" size="5" maxlength="5" value="50">
  <input type="button" value="51">
  <input type="button" value="52">
  <input type="button" value="53">
</div>

CSS

.container, input {
    text-align: center;
}

解决方案2：使用手动指定的宽度来均匀分布水平空间。这在所有情况下都有效地将当前页码居中，但它需要您对宽度进行硬编码。

HTML

<div class="container">
  <div class="left">
      <input type="button" value="47">
      <input type="button" value="48">
      <input type="button" value="49">
  </div>
  <div class="right">
      <input type="button" value="51">
      <input type="button" value="52">
      <input type="button" value="53">
  </div>
  <div class="center">
      <input type="text" size="5" maxlength="5" value="50">
  </div>
</div>

CSS

.left {
    width: 40%;
    float: left;
    text-align: right;
}
.right {
    width: 40%;
    float: right;
    text-align: left;
}
.center {
    width: 20%;
    margin-left: 40%;
}

这些解决方案都没有真正做到我想要的。有没有办法让当前页码居中，同时允许其他元素对齐到其自然大小，而不是任意像素或百分比宽度？

Answer 1

试试下面这个 CSS 表格布局。

.container {
    width: 100%;
    display: table;
    border-collapse: collapse;
    table-layout: fixed;
}
.left, .center, .right {
    display: table-cell;
    border: 1px solid red;
    text-align: center;
}
.center {
    width: 50px;
}

<div class="container">
    <div class="left">
        <input type="button" value="47">
        <input type="button" value="48">
        <input type="button" value="49">
    </div>
    <div class="center">
        <input type="text" size="5" maxlength="5" value="50">
    </div>
    <div class="right">
        <input type="button" value="51">
        <input type="button" value="52">
        <input type="button" value="53">
    </div>
</div>

jsfiddle

Answer 2

您应该同时使用flex 和浮动属性，查看我的解决方案：

.container {
  display: -webkit-flex; /* Safari */
  display: flex;  
}

.container, input {
    text-align: center;
}

.container:after {
    content:"";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 2px dotted #ff0000;
}

.left {
  display: inline-block;
  flex: 1;
  
}

.left input {
  float: right;  
}

.right {
  display: inline-block;
  flex: 1;
}

.right input {
  float: left;
}

.center {
  display: inline-block;
}

<div class="container">
  <div class="left">
      <input type="button" value="48">
      <input type="button" value="49">
  </div>
  <div class="center">
      <input type="text" size="5" maxlength="5" value="50">
  </div>
  <div class="right">
      <input type="button" value="51">
      <input type="button" value="52">
      <input type="button" value="53">
  </div>
  
</div>

Answer 3

您可以在包装器中使用值为 flex 的 CSS 属性 display，在子级中使用属性 flex。

要了解更多信息，请查看以下资源：A Complete Guide to Flexbox

这是一个例子：

.wrapper {
  display: flex;
}
.wrapper > div {
  text-align: center;
  flex: 1;
  border: 1px solid #000;
}

<div class="wrapper">

  <div>
    <button>1</button>
    <button>2</button>
  </div>

  <div>
    <button>3</button>
  </div>

  <div>
    <button>4</button>
    <button>5</button>
    <button>6</button>
  </div>

</div>

Answer 4

您可以考虑以下解决方案：

使用隐藏按钮始终保持左右两侧的标签数量相同

<div class="container">
  <input style="visibility: hidden" type="button" value="0">
  <input style="visibility: hidden" type="button" value="0">
  <input style="visibility: hidden" type="button" value="0">
  <input type="text" size="5" maxlength="5" value="1">
  <input type="button" value="2">
  <input type="button" value="3">
  <input type="button" value="4">
 </div>

Answer 5

您可以使用 CSS calc 将整个宽度分成 3 部分，而不是以 % 为单位指定宽度：

[50% - 25px][50 px][50% - 25px]

然后右对齐左边部分，左对齐右边部分，你就完成了。使用 SASS 或 LESS 时，您只需要指定中心部分的宽度即可。

.container {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.container > * {
    display: inline-block;
}
.container .left {
    width: calc(50% - 25px);
    text-align: right;
}
.container > input {
    width: 50px;
    margin: 0px;
    text-align: center;
}
.container .right {
    width: calc(50% - 25px);
    text-align: left;
}

<div class="container">
    <div class="left">
        <input type="button" value="48" />
        <input type="button" value="49" />
    </div>
    <input type="text" maxlength="5" value="50" />
    <div class="right">
        <input type="button" value="51" />
        <input type="button" value="52" />
        <input type="button" value="53" />
    </div>
</div>