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

概述我正在尝试创建一个由三部分组成的简单页面导航： >几个以前的页码(如果有的话) >当前页码(必须居中) >一些即将到来的页码(如果有的话) 重要的是当前页码始终在父容器中水平居中.其他两个部分应均匀占据剩余的水平空间. 这个JSFiddle说明了我解决这个问题的两次尝试. 解决方案1：使用text-align：center.这实现了期望的结果,但仅在两侧宽度相等的情况下.如果不是,则当前页码不在中 我正在尝试创建一个由三部分组成的简单页面导航：

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

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

这个JSFiddle说明了我解决这个问题的两次尝试.

解决方案1：使用text-align：center.这实现了期望的结果,但仅在两侧宽度相等的情况下.如果不是,则当前页码不在中心.

HTML

<div >  <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 >  <div >      <input type="button" value="47">      <input type="button" value="48">      <input type="button" value="49">  </div>  <div >      <input type="button" value="51">      <input type="button" value="52">      <input type="button" value="53">  </div>  <div >      <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 >  <div >      <input type="button" value="48">      <input type="button" value="49">  </div>  <div >      <input type="text" size="5" maxlength="5" value="50">  </div>  <div >      <input type="button" value="51">      <input type="button" value="52">      <input type="button" value="53">  </div>  </div>

总结

以上是内存溢出为你收集整理的html – CSS：如何在居中元素周围对齐元素？全部内容，希望文章能够帮你解决html – CSS：如何在居中元素周围对齐元素？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。