當被其他彈性項目包圍時，容器中的彈性項目居中
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><span></code></ 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; }