Pusatkan item lentur dalam bekas apabila dikelilingi oleh item lentur lain
<p>Saya mempunyai flexbox (lihat coretan kod di bawah sebagai contoh). </p>
<p>Saya mahu menyediakannya supaya dalam semua kes, <code><h2></code> berada di tengah-tengah <strong>flex-box</strong> akan mengalir di sekelilingnya, Berdasarkan penanda mereka. </p>
<p>Saya pada asasnya mencari <kod>align-self</code> kod CSS, tetapi untuk paksi utama, bukan paksi mendatar (yang mungkin membantu menjelaskan perkara yang saya minta). </p>
<p>Saya juga menggunakan <kod>margin: auto;</code> pada <kod><h2></code> yang saya pelajari selepas membaca artikel ini (halaman yang bagus, tetapi masih meninggalkan saya dengan soalan berikut - kecuali saya tidak memahami sepenuhnya segala-galanya). </p>
<p>Ini ialah kod yang saya dapat: </p>
<p>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.bekas {
align-item: tengah;
sempadan: 1px merah pepejal;
paparan: flex;
justify-content: pusat;
lebar: 100%;
}
h2 {
margin: auto;
]</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container">
<h2>Saya seorang h2</h2>
<span>Saya span 1</span>
<span>Saya span 2</span>
<span>Saya span 3</span>
</div>
<div class="container">
<span>Saya span 1</span>
<span>Saya span 2</span>
<span>Saya span 3</span>
<h2>Saya seorang h2</h2>
<span>Saya span 4</span>
<span>Saya span 5</span>
<span>Saya span 6</span>
</div>
<div class="container">
<span>Saya span 1</span>
<span>Saya span 2</span>
<h2>Saya seorang h2</h2>
<span>Saya span 3</span>
</div></code></pra>
</p>
<blockquote>
<p>Untuk menyatakan semula soalan saya sepenuhnya: Saya ingin tahu cara memusatkan <kod><h2></kod> pada halaman saya supaya tidak kira apa<kod><span></ di mana kod>, <kod><h2></kod> akan sentiasa berada di <strong>tengah mati</strong> </p>
</blockquote>
<p>P.S.: Saya bersedia menggunakan JavaScript dan jQuery, tetapi saya lebih suka cara CSS tulen untuk melakukan ini. </p>
<hr/>
<p>Selepas Michael Benjamin membalas: </p>
<p>Jawapannya membuatkan saya berfikir. Walaupun saya masih belum menemui cara untuk melakukan ini, saya percaya yang berikut adalah langkah ke arah yang betul: </p>
<p><strong>HTML</strong></p>
<pre class="brush:php;toolbar:false;"><div class="bekas">
<div>
<span>Saya span 1</span>
<span>Saya span 2</span>
<span>Saya span 3</span>
</div>
<h2>Saya seorang h2</h2>
<div>
<span>Saya span 4</span>
<span>Saya span 5</span>
<span>Saya span 6</span>
</div>
</div></pre>
<p><strong>CSS</strong></p>
<pre class="brush:php;toolbar:false;">.container div {
lentur: 1 1 auto;
text-align: tengah;
}
h2 {
lentur: 0 0 auto;
margin: auto;
}</pre>
<p>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.bekas {
align-item: tengah;
sempadan: 1px merah pepejal;
paparan: flex;
justify-content: pusat;
lebar: 100%;
}
.container div {
lentur: 1 1 auto;
text-align: tengah;
}
h2 {
lentur: 0 0 auto;
margin: auto;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="container">
<div>
</div>
<h2>Saya seorang h2</h2>
<div>
<span>Saya span 1</span>
<span>Saya span 2</span>
<span>Saya span 3</span>
</div>
</div>
<div class="container">
<div>
<span>Saya span 1</span>
<span>Saya span 2</span>
<span>Saya span 3</span>
</div>
<h2>Saya seorang h2</h2>
<div>
<span>Saya span 4</span>
<span>Saya span 5</span>
<span>Saya span 6</span>
</div>
</div>
<div class="container">
<div>
<span>Saya span 1</span>
<span>Saya span 2</span>
</div>
<h2>Saya seorang h2</h2>
<div>
<span>Saya span 3</span>
</div>
</div></code></pra>
</p>
<p>Pada asasnya, teorinya ialah walaupun jumlah bilangan <kod><span></code> diketahui terdapat tiga elemen secara keseluruhan: <kod><div>< ;h2> < div></code></p>
<blockquote>
<p>Seperti yang anda lihat dalam coretan kod di atas, saya telah mencuba (<kod>flex: 0 0 auto</code> dan <code>flex: 1 1 auto</code> dsb.) untuk membenarkan Ia berfungsi tetapi masih belum berfungsi. Bolehkah sesiapa memberitahu saya jika ini adalah langkah ke arah yang betul dan bagaimana untuk menolak ini ke dalam produk sebenar? </p>
</blockquote></p>
