html – CSS：如何在居中元素周围对齐元素？

发布时间：2020-12-14 19:45:41 所属栏目：资源来源：网络整理

导读：我正在尝试创建一个由三部分组成的简单页面导航：几个以前的页码(如果有的话) 当前页码(必须居中) 一些即将到来的页码(如果有的话) 重要的是当前页码始终在父容器中水平居中.其他两个部分应均匀占据剩余的水平空间. 这个JSFiddle说明了我解决这个问题的两次

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

>几个以前的页码(如果有的话)
>当前页码(必须居中)
>一些即将到来的页码(如果有的话)

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

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

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

解决方法

你应该使用 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!