Zentrieren Sie flexible Elemente in einem Container, wenn sie von anderen flexiblen Elementen umgeben sind
<p>Ich habe eine Flexbox (siehe Codeausschnitt unten als Beispiel). </p>
<p>Ich möchte es so einrichten, dass sich <code><h2></code> in der Mitte der <strong>flex-box</strong> befindet wird es umfließen, basierend auf ihrem Markup. </p>
<p>Ich suche grundsätzlich nach dem CSS-Code <code>align-self</code>, aber nach der Hauptachse, nicht nach der horizontalen Achse (was helfen könnte, zu erklären, wonach ich frage). </p>
<p>Ich habe auch <code>margin: auto;</code> auf meinen <code><h2></code> angewendet, was ich nach dem Lesen dieses Artikels gelernt habe (eine großartige Seite, aber es ist immer noch so). lässt mich mit meinen folgenden Fragen zurück - außer dass ich nicht alles ganz verstehe). </p>
<p>Das ist der Code, den ich bekomme: </p>
<p>
<pre class="snippet-code-css lang-css Prettyprint-override"><code>.container {
align-items: center;
Rand: 1 Pixel durchgehend rot;
Anzeige: Flex;
rechtfertigen-Inhalt: Mitte;
Breite: 100 %;
}
h2 {
Rand: automatisch;
]</code></pre>
<pre class="snippet-code-html lang-html Prettyprint-override"><code><div class="container">
<h2>Ich bin ein h2</h2>
<span>Ich bin Span 1</span>
<span>Ich bin Span 2</span>
<span>Ich bin 3 Jahre alt</span>
</div>
<div class="container">
<span>Ich bin Span 1</span>
<span>Ich bin Span 2</span>
<span>Ich bin 3 Jahre alt</span>
<h2>Ich bin ein h2</h2>
<span>Ich bin 4</span>
<span>Ich bin 5 Jahre alt</span>
<span>Ich bin 6 Jahre alt</span>
</div>
<div class="container">
<span>Ich bin Span 1</span>
<span>Ich bin Span 2</span>
<h2>Ich bin ein h2</h2>
<span>Ich bin 3 Jahre alt</span>
</div></code></pre>
</p>
<blockquote>
<p>Um meine Frage noch einmal vollständig zu formulieren: Ich möchte wissen, wie ich <code><h2></code> auf meiner Seite zentrieren kann, sodass egal welcher andere<code><span></ wo ist code>, <code><h2></code> befindet sich immer im <strong>Totpunkt</strong> </p>
</blockquote>
<p>P.S.: Ich bin bereit, JavaScript und jQuery zu verwenden, aber ich bevorzuge dafür eine reine CSS-Methode. </p>
<Std/>
<p>Nachdem Michael Benjamin geantwortet hatte: </p>
<p>Seine Antwort brachte mich zum Nachdenken. Obwohl ich noch keine Möglichkeit gefunden habe, dies zu tun, glaube ich, dass Folgendes ein Schritt in die richtige Richtung ist: </p>
<p><strong>HTML</strong></p>
<pre class="brush:php;toolbar:false;"><div class="container">
<div>
<span>Ich bin Span 1</span>
<span>Ich bin Span 2</span>
<span>Ich bin 3 Jahre alt</span>
</div>
<h2>Ich bin ein h2</h2>
<div>
<span>Ich bin 4</span>
<span>Ich bin 5 Jahre alt</span>
<span>Ich bin 6 Jahre alt</span>
</div>
</div></pre>
<p><strong>CSS</strong></p>
<pre class="brush:php;toolbar:false;">.container div {
Flex: 1 1 Auto;
Textausrichtung: Mitte;
}
h2 {
Flex: 0 0 automatisch;
Rand: automatisch;
}</pre>
<p>
<pre class="snippet-code-css lang-css Prettyprint-override"><code>.container {
align-items: center;
Rand: 1 Pixel durchgehend rot;
Anzeige: Flex;
rechtfertigen-Inhalt: Mitte;
Breite: 100 %;
}
.container div {
Flex: 1 1 Auto;
Textausrichtung: Mitte;
}
h2 {
Flex: 0 0 automatisch;
Rand: automatisch;
}</code></pre>
<pre class="snippet-code-html lang-html Prettyprint-override"><code><div class="container">
<div>
</div>
<h2>Ich bin ein h2</h2>
<div>
<span>Ich bin Span 1</span>
<span>Ich bin Span 2</span>
<span>Ich bin 3 Jahre alt</span>
</div>
</div>
<div class="container">
<div>
<span>Ich bin Span 1</span>
<span>Ich bin Span 2</span>
<span>Ich bin 3 Jahre alt</span>
</div>
<h2>Ich bin ein h2</h2>
<div>
<span>Ich bin 4</span>
<span>Ich bin 5 Jahre alt</span>
<span>Ich bin 6 Jahre alt</span>
</div>
</div>
<div class="container">
<div>
<span>Ich bin Span 1</span>
<span>Ich bin Span 2</span>
</div>
<h2>Ich bin ein h2</h2>
<div>
<span>Ich bin 3 Jahre alt</span>
</div>
</div></code></pre>
</p>
<p>Grundsätzlich besteht die Theorie darin, dass die Gesamtzahl der <code><span></code> zwar unbekannt ist, es aber insgesamt drei Elemente gibt: <code><div>< ;h2> < div></code></p>
<blockquote>
<p>Wie Sie im Codeausschnitt oben sehen können, habe ich versucht (<code>flex: 0 0 auto</code> und <code>flex: 1 1 auto</code> etc.) zu lassen Es funktioniert, hat aber noch nicht funktioniert. Kann mir jemand sagen, ob dies ein Schritt in die richtige Richtung ist und wie ich dies in ein tatsächliches Produkt umsetzen kann? </p>
</blockquote></p>
