Text zu bild zentrieren

[Jeremygolf]

Hallo zusammen,

ich probiere eine Text und ein UL Element vertical zu einem Logo zentrieren.
Alle Elemente von der class top-row sollten vertical zentriert sein. Mit table und table-cell hat es nicht funktioniert.
Irgendjemand eine Lösung dafür?
Ich benutze Bootstrap als css library.
Hier der Code:

<div class="row top-row">
                <div class="col-md-2">
                    <img class="img-logo" src="img/logo.jpg">
                </div>
                <div class="col-md-8">
                    <div class="col-md-9">
                        <span class="title">Website</span>
                    </div>
                    <div class="col-md-3">
                        <div class="contact-top">
                            <ul class="contact">
                                <li>Contact</li>
                                <li>Info 11</li>
                                <li>ASDF</li>
                                <li>000 000 00 00</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

 

[MrMurphy]

Hallo,

eine direkte Anweisung um Elemente in Bootstrap vertikal auszurichten gibt es wohl nicht.

Ich kann dir leider auch nur ein paar Hinweise geben.

Zunächst solltest du dich an die Vorgaben von Bootstrap halten. Jede "Zeile" muss sich innerhalb eines Containers mit der Klasse row befinden. Du musst also um die inneren Container col-md-9 und col-md-3 noch einen Container mit der Klasse row einfügen. Das hat zwar nichts direkt mit deinem Problem zu tun, allerdings führen solche Nachlässigkeiten in der Regel zu weitern Problemen.

Mein Denkansatz zu deinem Problem:

Du hast in dem vertikal zu zentrierenden Container wiederum mehrere Container, deren Inhalt jeweils für sich vertikal zentriert werden muss. Das macht die ganze Aktion sehr aufwändig.

1. Zunächst musst du den Inhalt von row top-row vertikal zentrieren.

2. Dann musst du den Inhalt von col-md-2 vertikal zentrieren.

3. Dann musst du den Inhalt von col-md-8 vertikal zentrieren.

4. Dann musst du den Inhalt des noch einzufügenden Containers row vertikal zentrieren.

5. Dann musst du den Inhalt von col-md-9 vertikal zentrieren.

6. Dann musst du den Inhalt von col-md-3 vertikal zentrieren.

7. Und zum Schluss noch gegebenenfalls den Inhalt des ul-Elements.

Wobei du natürlich darauf achten musst, nicht an der Systematik von Bootstrap rumzupfuschen, Stichwort: Vererbung von CSS. Die Gefahr besteht immer, wenn man nur einen Ausschnitt der Seite vor sich hat.

Wenn vertikal zentriert werden soll achtet man in der Regel darauf, nur den Inhalt eines Containers zentrieren zu müssen. Bei deiner Konstruktion sind es aber mehrere. Wenn du vertikal zentrieren willst solltest du den Aufbau also wesentlich vereinfachen. Hier ist die divitis von Bootstrap tödlich und nicht mal notwendig.

Gruss

MrMurphy

 

[Tronjer]

Dafür gibt es mehrere Ansätze.

- Wie MrMurphy bereits erwähnte, alle vertikal zu zentrierenden Elemente in einen gemeinsamen .col- Container. Dort kann man dann mit display: flex oder height: calc() arbeiten.

- Die height oder den content der .col- Container innerhalb eines .row Parents manuell anpassen, in dem man Media Queries bei den 4 Breakpoints setzt. Was beim skalieren des Browser-Windows aber zumeist nicht schön aussieht.

Der Schwachpunkt des Bootstrap-Layouts besteht darin, dass es auf den herkömmlichen Floats anstatt auf dem moderneren Flexbox basiert. Die Höhe eines .row Elements wird durch den höchsten darin liegenden .col- Container bestimmt. Klassischer Usecase: eine Seite hat 3 .row Elemente mit jeweils 4 .col- Containern, die alle unterschiedlich hoch sind und man möchte, dass sämtliche 12 Elemente den gleichen Abstand in Breite und Höhe aufweisen. Das geht CSS-technisch mit dem Float-Grid nicht.

Will man nun ein Portal auf Bootstrap aufbauen und bei einer Unterseite stellt sich obiges Problem, bietet sich als Lösung Isotope an. Das funktioniert zusammen mit Bootstrap und durchbricht dessen Float-Grid.

http://isotope.metafizzy.co/