Question

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

以前的几个页码（如果有的话）
当前页码（必须居中）
一些即将出现的页码（如果有的话）

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

这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并将属性浮动在一起，检查我的解决方案：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

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

以下是一个例子：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

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

USERID  checktime   checktime   OnHour
223 2015-06-14 07:40:09.000 06/14/2015  7 
223 2015-06-14 07:40:18.000 06/14/2015  7 --- Duplicate
223 2015-06-14 07:40:36.000 06/14/2015  7 --- Duplicate
223 2015-06-15 16:23:32.000 06/15/2015  16
223 2015-06-16 16:19:31.000 06/16/2015  16 ---Duplicate

Answer 5

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

5 个答案: