CSS: 如何围绕居中元素对齐元素?

CSS: How to align elements around a centered element?

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

  1. 前几个页码(如果有的话)
  2. 当前页码(必须居中)
  3. 一些即将到来的页码(如果有的话)

重要的是当前页码始终在父容器内水平居中。另外两部分应该均匀地占据剩余的水平space。

这个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:使用手动指定的宽度来均匀分布水平space。这在所有情况下都有效地将当前页码居中,但它需要您对宽度进行硬编码。

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

这些解决方案都没有真正满足我的要求。有什么方法可以让当前页码居中,同时允许其他元素与其自然大小对齐,而不是任意像素或百分比宽度?

试试这个 CSS table 布局如下。

.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

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

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

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

您可以使用 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>

您可以在children.

中使用CSS属性display with the value flex in the wrapper, and the property 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>

你应该同时使用 flex 和 float 属性,查看我的解决方案:

.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>