CSS: 如何围绕居中元素对齐元素?
CSS: How to align elements around a centered element?
我正在尝试创建一个由三部分组成的简单页面导航:
- 前几个页码(如果有的话)
- 当前页码(必须居中)
- 一些即将到来的页码(如果有的话)
重要的是当前页码始终在父容器内水平居中。另外两部分应该均匀地占据剩余的水平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>
您可以考虑以下解决方案:
使用隐藏按钮始终保持左右两侧的标签数量相同
<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>
我正在尝试创建一个由三部分组成的简单页面导航:
- 前几个页码(如果有的话)
- 当前页码(必须居中)
- 一些即将到来的页码(如果有的话)
重要的是当前页码始终在父容器内水平居中。另外两部分应该均匀地占据剩余的水平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>
您可以考虑以下解决方案:
使用隐藏按钮始终保持左右两侧的标签数量相同
<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>