Vertikale Mitte ausrichten im inneren div-Spalten

Ist es möglich, mit CSS, während Sie eine Zeile mit zwei Spalten, eine mit Bild und eine mit text, deren Inhalt vertikal ausgerichtet in der Mitte?

Ich habe schlug meinen Kopf tagelang über dies und versuchte alles, ich könnte denken.

Dies ist die grundlegende Struktur, die ich verwende, die ist ganz basierend auf Prozentsätzen. Dies ist für eine responsive one-page layout basiert auf einer Reihe von Abschnitten, die jeweils mit min-height auf 100% gesetzt.

CSS

html, body {
    width: 100%;
    height: 100%;
}

section {
    width: 100%;
    min-height: 100%;
    display:table;
    height:inherit;
}

.row {
    width: 100%;
    height: 100%;
    display:table-cell;
}

.col-left, .col-right {
    float: left;
    width: 50%;
    height: 100%;
}

/*--this should be vertically centred--*/

.content {
}

HTML

<section>

        <div class="row">

            <div class="col-left">
                <div class="content">
                    <h1>SOME TEXT</h1>
                </div>
            </div>

            <div class="col-right">
                <div class="content">
                    <img src="SOME IMAGE URL">
                </div>
            </div>

        </div>

</section>

JSFiddle

mögliche Duplikate von Vertical-align: middle

InformationsquelleAutor David Martins | 2015-04-15

  1. 11
    .row {
    ...
    display:table-row;
}
.col-left, .col-right {
    ...
    display: table-cell;
    vertical-align: middle;
}

    Demo

    InformationsquelleAutor isherwood

  2. 1

    Für jemand für dieses Thema interessiert, dieses Thema und die Antworten, erweckte in mir eine andere Frage, welche Methode in dieser situation, und in der Tat, für den Bau von Spalten im Allgemeinen: oder Floating-Anzeige-Eigenschaft. Für jeden Neuling oder Autodidakt Möchtegern-Entwickler wie meine selbst kann interessant sein, zu wissen, was ich habe abgeschlossen, nach der Forschung und Erprobung.

    Finde ich mich selbst oft mit den verschiedensten Methoden für den Bau von Spalten, die sich rund um Floating die Elemente und die eine oder andere Art immer erfordern einige Hacker am Ende genau das zu tun, was ich will, ließ mich mit einem Gefühl der Inkonsequenz und Unzuverlässigkeit.

    Man würde denken, dass etwas so entscheidend für die layout-Struktur haben würde, an diesem Punkt in der Zeit einige offensichtliche, elegante und einfache Lösung. Anscheinend hat es, und es heißt, der Tabelle Anzeigen. Es könnte Einschränkungen in einigen sehr spezifischen Situationen, sondern im Allgemeinen, es ist aller, den Sie benötigen. Es ist grundsolide und man kann ziemlich viel tun, was Sie wollen. Leider, ich glaube, das Wort "Tabelle" ist immer noch eine Art Tabu. Diese Methode ist jedoch einfach, verständlich, zuverlässig und erfordert keine hacks verhält sich wie erwartet. Die vertikale Ausrichtung ist immer ein Kampf ist auch leicht gemacht auf diese Weise.

    Einer einfachen Struktur wie das ist alles, was Sie brauchen: 

    .container {
  display: table;
}
.row {
  display: table-row;
}
.col {
  display: table-cell;
}

    Aus irgendeinem Grund (wahrscheinlich, weil der das böse Wort "Tabelle"), werden Sie nicht in der Lage zu finden diese Methode vorgeschlagen, überall mit einer einfachen Suche auf grundlegende css-Spalten.

    Ich dachte, dieser Artikel über das Thema wurden interessante:

    Geben Sie Schwimmt der Streifen in CSS-Layouts

    Abschied Schwebt: Die Zukunft von CSS-Layout

    InformationsquelleAutor David Martins

Schreibe einen Kommentar