Html 使用 flexbox 将元素左对齐和居中对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28700805/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Aligning elements left and center with flexbox
提问by Carl Edwards
I'm using flexbox to align my child elements. What I'd like to do is center one element and leave the other aligned to the very left. Normally I would just set the left element using margin-right: auto. The problem is that pushes the center element off center. Is this possible withoutusing absolute positioning?
我正在使用 flexbox 来对齐我的子元素。我想做的是将一个元素居中，让另一个元素与最左边对齐。通常我只会使用margin-right: auto. 问题是将中心元素推离中心。这可能不使用绝对定位吗？
HTML & CSS
HTML 和 CSS
#parent {
align-items: center;
border: 1px solid black;
display: flex;
justify-content: center;
margin: 0 auto;
width: 500px;
}
#left {
margin-right: auto;
}
#center {
margin: auto;
}<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
</div>采纳答案by pschueller
EDIT:See Solo's answerbelow, it is the better solution.
编辑：请参阅下面的Solo 答案，这是更好的解决方案。
The idea behind flexbox is to provide a framework for easily aligning elements with variable dimensions within a container. As such, it makes little sense to provide a layout where the width of one element is totally ignored. In essence, that is exactly what absolute positioning is for, as it takes the element out of the normal flow.
flexbox 背后的想法是提供一个框架，以便在容器内轻松对齐具有可变尺寸的元素。因此，提供一种完全忽略一个元素的宽度的布局是没有意义的。本质上，这正是绝对定位的用途，因为它将元素从正常流中取出。
As far as I know, there is no nice way of doing this without using position: absolute;, so I would suggest using it... but If you REALLY don't want to, or can't use absolute positioning then I suppose you could use one of the following workarounds.
据我所知，没有使用就没有好的方法position: absolute;，所以我建议使用它......但是如果你真的不想，或者不能使用绝对定位，那么我想你可以使用一个以下解决方法。
If you know the exact width of the "Left" div, then you could change justify-contentto flex-start(left) and then align the "Center" div like this:
如果您知道“左” div 的确切宽度，那么您可以更改justify-content为flex-start（左），然后像这样对齐“中心” div：
#center {
position: relative;
margin: auto;
left: -{half width of left div}px;
}
If you do not know the width, then you could duplicate "Left" on the right side, use justify-content: space-between;, and hide the new right element:
Just to be clear, this is really, really ugly... better to use absolute positioning than to duplicate content. :-)
如果您不知道 width，那么您可以在右侧复制“Left”，使用justify-content: space-between;并隐藏新的 right 元素：
只是要清楚，这真的非常丑陋……使用绝对定位比使用绝对定位更好重复的内容。:-)
#parent {
align-items: center;
border: 1px solid black;
display: flex;
justify-content: space-between;
margin: 0 auto;
width: 500px;
}
#right {
opacity: 0;
}<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
<span id="right">Left</span>
</div>回答by Solo
Add third empty element:
添加第三个空元素：
<div class="parent">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right"></div>
</div>
And the following style:
以及以下样式：
.parent {
display: flex;
}
.left, .right {
flex: 1;
}
Only left and right are set to grow and thanks to the facts that...
只有左派和右派会增长，这要归功于……
- there are only two growing elements (doesn't matter if empty) and
- that both get same widths (they'll evenly distribute the available space)
- 只有两个不断增长的元素（如果为空则无关紧要）和
- 两者都具有相同的宽度（它们会均匀分布可用空间）
...center element will always be perfectly centered.
... center 元素将始终完美居中。
This is much better than accepted answer in my opinion because you do not have to copy left content to right and hide it to get same width for both sides, it just magically happens(flexbox is magical).
在我看来，这比接受的答案要好得多，因为您不必将左边的内容复制到右边并隐藏它以获得相同的宽度，它只是神奇地发生了（flexbox 是神奇的）。
In action:
在行动：
.parent {
display: flex;
}
.left,
.right {
flex: 1;
}
/* Styles for demonstration */
.parent {
padding: 5px;
border: 2px solid #000;
}
.left,
.right {
padding: 3px;
border: 2px solid red;
}
.center {
margin: 0 3px;
padding: 3px;
border: 2px solid blue;
}<div class="parent">
<div class="left">Left</div>
<div class="center">Center</div>
<div class="right"></div>
</div>回答by Whisher
Try this no hacks :)
试试这个没有黑客:)
CSS
CSS
.container{
width: 500px;
margin: 0 auto;
}
.box{
display: flex;
align-items: center;/* just in case*/
justify-content: space-between;
}
.box p:nth-child(2){
text-align: center;
background-color: lime;
flex: 1 1 0px;
}
HTML
HTML
<div class="container">
<div class="box">
<p>One</p>
<p>Two</p>
</div>
</div>
回答by Thiwanka Dodanwela
I have another solution. In my opinion, Adding an empty block to the center element is fine but code-wise it bit ugly. My solution for this is below
我有另一个解决方案。在我看来，向中心元素添加一个空块很好，但代码方面有点难看。我的解决方案如下
<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
</div>
#parent {
display: flex;
}
#left {
flex:1;
}
#center {
flex:1;
}
#parent:after {
flex:1;
}
回答by cfx
Since this is 4 years old I figured I'd update this with a much easier CSS Grid solution.
由于这是 4 岁，我想我会用一个更简单的 CSS Grid 解决方案来更新它。
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid black;
margin: 0 auto;
width: 500px;
}
#center {
text-align: center;
}<div id="parent">
<span id="left">Left</span>
<span id="center">Center</span>
</div>回答by Martin
If you don't want to rely on positioning, the only way I've found that makes it truly centered is to use a combination of auto margin and negative margin prevent the centered element to getting pushed over by the left aligned element. This requires that you know the exact width of the left aligned element though.
如果您不想依赖定位，我发现使其真正居中的唯一方法是使用自动边距和负边距的组合，防止居中元素被左对齐元素推倒。不过，这要求您知道左对齐元素的确切宽度。
.container {
height: 100px;
border: solid 10px skyblue;
display: flex;
justify-content: center;
}
.block {
width: 120px;
background: tomato;
}
.justify-start {
margin-right: auto;
}
.justify-center {
margin-right: auto;
margin-left: -120px;
}<div class="container">
<div class="block justify-start"></div>
<div class="block justify-center"></div>
</div>回答by Stuiterbal
As far as I know this is possible with the following code.
据我所知，这可以通过以下代码实现。
https://jsfiddle.net/u5gonp0a/
https://jsfiddle.net/u5gonp0a/
.box {
display: flex;
justify-content: center;
background-color: green;
text-align: left;
}
.left {
padding: 10px;
background-color: pink;
}
.center {
padding: 10px;
background-color: yellow;
margin: 0 auto;
}<div class="box">
<div class="left">left</div>
<div class="center">center</div>
</div>