Bootstrap column vertikal zentrieren

[fr1000]

Hallo an alle,
ich hoffe ich poste dies im richtigen Unterforum. Wenn nicht -> Sorry... bitte verschieben. Danke

Ich habe folgendes Problem und hoffe ihr könnt mir helfen:

Ich verwende für meine Seite Bootstrap ... das klappt auch soweit ganz gut.. bis auf folgendes:

Ich habe folgenden HTML Code innerhalb eines Beitrages in Joomla erstellt:

<div class="row">
    <div class="col-md-6">
        <p><span style="font-size: 14pt;">Ich bin Text Nummer 1</span>
        </p>
        <p><span style="font-size: 14pt;">Ich bin Text Nummer 2</span>
        </p>
    </div>
    <div class="col-md-6">
        <p><img src="http://placehold.it/544x300" alt="Beispielbild" />
        </p>
    </div>
</div>

Nun wird das Bild auf der rechten und der Text auf der linken Seite angezeigt. Soweit so gut... Das Problem ist jedoch, dass der Text nicht vertikal mittig angezeigt wird, sondern am oberen Rand klebt.

Ich habe schon alles mögliche ausprobiert... vertical-align, display: table, etc... .... alles hat nicht funktioniert... Da die Seite responsiv bleiben soll, kann ich keine festen Höhen etc.. verwenden.

Hier das ganze als Live Beispiel mittels Codepen:



Kann mir jemand bei diesem Problem helfen? Bin mittlerweile wirklich am verzweifeln, da ich schon Stunden an so einer "Kleinigkeit" verbracht habe.

Schon jetzt vielen Dank im Voraus

Liebe Grüße
fr1000

 

[patrick_l]

Geht schnell und einfach mit CSS3 und der Transform-Eigenschaft. Packe deinen ganzen Text in eine weitere Division. Danach arbeitest du mit Position relative und absolute. Relative für die Kolumne, absolute für den innere Bereich.

<div class="col-md-6 col-out">
    <div class="col-inner">
        <p>Content here!</p>
    </div>
</div>

.col-out {
  display: relative;
}

.col-inner {
  display: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Liebe Grüße, Patrick

 

[hub]

Moin moin,
welche Version von bootstrap nutzt du? In den aktuellen Versionen wäre vielleicht das Media Object etwas für dich?

Gruß Ulli

 

[fr1000]

Hallo,
danke für eure Antworten.
Ich habe den Lösungsweg von Patrick versucht umzusetzen. Wenn ich dies mache kann ich zwar den Text neu positionieren (transform: translate(0%, 150%); ergibt in meinem Fall die passende Positionierung). Das Problem ist jedoch, dass dies nur bei einer Auflösung funktioniert. Sobald ich das Browserfenster verkleinere (Und dadurch auch die Bilder kleiner werden und sich der Text anpassen müsste) klappt das nicht mehr.
Und wenn das ganze zu klein wird, verschwindet der fest positionierte Text hinter dem Bild.
Dieser Lösungsweg ist also keine verwendbare Variante für mich.

Ich nutzte nur Zeit Bootstrap v3.1.1... ich habe mal versucht das ganze mit dem Media Object umzusetzen. Ergebnis: Ich könnte es damit auch machen. Habe jedoch weiterhin, auch nach einigen Versuchen, das Problem, dass ich den Text nicht vertikal zentriert bekomme. :/
EDIT: Ich kann es damit doch nicht machen. Die Bilder werden bei der Nutzung von Media Object nicht runter skaliert, wenn der Browser verkleinert wird. Also ist auch das leider keine Lösung für mein Problem.

Gibt es noch weitere Ansätze und Ideen, welche ich umsetzten könnte?
Nochmal Danke!

Liebe Grüße und eine ruhige Nacht!

fr1000

 

[patrick_l]

Das Problem ist jedoch, dass dies nur bei einer Auflösung funktioniert. Sobald ich das Browserfenster verkleinere (Und dadurch auch die Bilder kleiner werden und sich der Text anpassen müsste) klappt das nicht mehr.

Media Queries sind dein Freund Ruf die Klasse innerhalb deiner gesetzen Media Queries auf und überschreibe die vorher definierten Werte durch neue. Bezüglich meines Code Snippets, ist halt zum vertikalen und horizontalen zentrieren. Es gibt aber noch genügend andere Wege.

Guckst du hier

Liebe Grüße, Patrick

 

[fr1000]

Hey,
vielen Dank für den zusätzlichen Link. Dort ist eine Variante drin, welche ich nutzen kann. Es funktioniert. Danke!
Die verwendete Variante ist das "Zentrieren mittels Flexbox"

Das funktioniert bis zu dem Grad, wo Bootstrap auf das einzeilige Layout umbricht.
Wenn dies geschieht rutscht das Bild rechts aus dem sichtbaren Bereich raus, da die Flexbox den gesamten Platz einnimmt. ... Im Endeffekt müsste ich nun sobald der Umbruch stattfindet, die Flexboxeigenschaften wieder "deaktivieren". Dies wollte ich mit Media Queries regeln.

Hier der aktuelle HTML Code:

<body>
<!--- Ganz viel HTML fuer Template-->
<div class="row v-zentriert-parent">
    <div class="col-md-6 v-zentriert">
        <p><span style="font-size: 14pt;">Ich bin Text Nummer 1</span>
        </p>
        <p><span style="font-size: 14pt;">Ich bin Text Nummer 2</span>
        </p>
    </div>
    <div class="col-md-6">
        <p><img src="http://placehold.it/544x300" alt="Beispielbild" />
        </p>
    </div>
</div>
 
<!--- Ganz viel HTML fuer Template-->
</body>

Und die dazugehörige CSS Definition:

body {
  text-align:center;
}

.v-zentriert-parent {
display: -webkit-flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

.v-zentriert {
width: 100%;
}

Nun wollte ich gern ab dem Umbruch des Layouts die Eigenschaften von v-zentriert-parent und v-zentriert wieder deaktivieren. Dort liegt jedoch mein Problem. Wie kann ich dies Umsetzen? Ich finde im Netz nur die Möglichkeit ein Div Element komplett auszublenden. Dann ist ja aber alles in dem Div weg. Das nutzt mir also nichts.

Soweit bin ich nun für die Anpassung im CSS:

/*Anpassungen fuer Darstellung nach Umbruch von Bootstrap in einzeilige Ansicht*/
@media (max-width: 1003px){

.v-zentriert-parent {
  /*Was muss hier rein?*/
}

.v-zentriert {
  /*Und hier?*/
}
}

Schon jetzt nochmal vielen Dank! 80% meines Problems sind schon gelöst. Bin echt beeindruckt wie schnell man hier kompetente Hilfe bekommt.

Liebe Grüße
fr1000