当被其他弹性项目包围时，容器中的弹性项目居中
P粉042455250
2023-08-25 14:40:25
<p>我有一个弹性盒（请参阅下面的代码片段作为示例）。</p>
<p>我想设置它，以便在所有情况下， <code><h2></code> 位于 <strong>flex-box</strong> 的中心，其他跨度将围绕它流动，基于他们的标记。</p>
<p>我基本上是在寻找 <code>align-self</code> CSS 代码，但是是针对主轴，而不是横轴（这可能有助于解释我的要求）。</p>
<p>我还将 <code>margin: auto;</code> 应用于我的 <code><h2></code>，这是我在阅读本文后了解到的（一个很棒的页面，但它仍然让我留下了我的以下问题 - 除非我没有完全理解所有内容）。</p>
<p>这是我得到的代码：</p>
<p>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
align-items: center;
border: 1px solid red;
display: flex;
justify-content: center;
width: 100%;
}
h2 {
margin: auto;
]</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container">
<h2>I'm an h2</h2>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
<div class="container">
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
<h2>I'm an h2</h2>
<span>I'm span 4</span>
<span>I'm span 5</span>
<span>I'm span 6</span>
</div>
<div class="container">
<span>I'm span 1</span>
<span>I'm span 2</span>
<h2>I'm an h2</h2>
<span>I'm span 3</span>
</div></code></pre>
</p>
<blockquote>
<p>要完全重申我的问题：我想知道如何将 <code><h2></code> 在我的页面上居中，以便无论其他 <code><span></code> 在哪里， <code><h2></code> 将始终位于弹性框的<strong>死点</strong>中心。</p>
</blockquote>
<p>P.S.：我愿意使用 JavaScript 和 jQuery，但我更喜欢使用纯 CSS 方式来实现这一点。</p>
<hr/>
<p>迈克尔·本杰明回答后：</p>
<p>他的回答让我思考。虽然我还没有找到一种方法来做到这一点，但我相信以下是朝着正确方向迈出的一步：</p>
<p><strong>HTML</strong></p>
<pre class="brush:php;toolbar:false;"><div class="container">
<div>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
<h2>I'm an h2</h2>
<div>
<span>I'm span 4</span>
<span>I'm span 5</span>
<span>I'm span 6</span>
</div>
</div></pre>
<p><strong>CSS</strong></p>
<pre class="brush:php;toolbar:false;">.container div {
flex: 1 1 auto;
text-align: center;
}
h2 {
flex: 0 0 auto;
margin: auto;
}</pre>
<p>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
align-items: center;
border: 1px solid red;
display: flex;
justify-content: center;
width: 100%;
}
.container div {
flex: 1 1 auto;
text-align: center;
}
h2 {
flex: 0 0 auto;
margin: auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container">
<div>
</div>
<h2>I'm an h2</h2>
<div>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
</div>
<div class="container">
<div>
<span>I'm span 1</span>
<span>I'm span 2</span>
<span>I'm span 3</span>
</div>
<h2>I'm an h2</h2>
<div>
<span>I'm span 4</span>
<span>I'm span 5</span>
<span>I'm span 6</span>
</div>
</div>
<div class="container">
<div>
<span>I'm span 1</span>
<span>I'm span 2</span>
</div>
<h2>I'm an h2</h2>
<div>
<span>I'm span 3</span>
</div>
</div></code></pre>
</p>
<p>基本上，理论是，虽然 <code><span></code> 的总数未知，但已知总共有三个元素：<code><div><h2> <div></code></p>
<blockquote>
<p>正如您在上面的代码片段中看到的，我尝试过（<code>flex: 0 0 auto</code>和<code>flex: 1 1 auto</code>等）让它工作但还没有成功。谁能告诉我这是否是朝着正确方向迈出的一步，以及如何将其推向实际产品？</p>
</blockquote></p>
一种方法是在两侧添加空跨度，然后将跨度和 h2 设置为某个弹性值，如下所示：
.container { align-items: center; border: 1px solid red; display: flex; justify-content: center; width: 100%; } h2 { margin: auto; text-align: center; flex: 3 0; } span{ flex: 1 0; }所以你保证两边的空间相等。那么唯一的问题是您必须确定您希望 h2 采用多少宽度。
Flex 对齐属性通过分配容器中的可用空间来发挥作用。
因此，当一个 Flex 项目与其他项目共享空间时，没有单步方法可以将其居中，除非两侧同级项目的总长度相等。
在第二个示例中，
h2两侧的跨度总长度相等。因此，h2完全位于容器的中心。.container { display: flex; justify-content: center; align-items: center; border: 1px solid red; margin: 5px; padding: 5px; } p { text-align: center;} p > span { background-color: aqua; padding: 5px; }