Vertikal ausrichten 2 floating divs mit flexibler Höhe

Ich versuche, herauszufinden, wie Sie 2 floating divs vertikal. Jeder der divs hat eine flexible Höhe.

Hier ist was ich habe, so weit: http://jsfiddle.net/VLRpc/1/

 <div class="section">
    <div class="container">
        <div class="wrap">
            <div class="column left">
                <h1>Software</h1>
                <p>I use many software applications to achieve the best results.</p>
            </div>
            <div class="column right"></div>
        </div><!-- end wrap -->
</div><!-- end container -->
</div><!-- end section -->

.container {
width: 100%;
height: 100%;
display: table;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
.wrap {
vertical-align: middle;
display: table-cell;
padding: 0;
margin: 0;
border: 1px solid red;
}

/* Columns */
.column {
width: 45%;
height: auto;
float:left;
text-align: center;
border: 1px solid black;
}
.right {
margin-left:0;
height: 250px
}
.left {
margin-left:5%;
}

Jedoch das div-Element auf der linken gedrängt an die Spitze der größeren div, die auf der rechten. Ich brauche diese beiden divs vertikal zentriert.

Irgendwelche Ideen?

absolute oder float-tötet alle Werte anzeigen, oder verwenden Sie die Anzeige(table/table-cell - inline-block ) , vertical-align , oder verwenden Sie absolute oder float mit lustigen negativen margin -:), ich denke, Sie bekommen, was meine Wahl wäre 🙂
Können Sie liefern ein Beispiel in jsfiddle?
jsfiddle.net/VLRpc/3 so etwas ?
oder so ? jsfiddle.net/VLRpc/4
Ja mit display:inline und vertikale Mitte ausrichten auf die Spalte Klasse der trick funktioniert

InformationsquelleAutor TheNameHobbs | 2013-12-28

  1. 4

    Hier ist, wie Sie es schaffen könnten flexibel (keine festen Höhen, nur halten die .Spalte-Container vertikal zentriert, unabhängig von deren Inhalt): set .Spalte display:inline-block und vertical-align: middle in Ihrem table-cell .wrap-div.

    .column {
    display: inline-block;
    width: 45%;
    height: auto;
    text-align: center;
    border: 1px solid black;
    vertical-align: middle;
}

    http://jsfiddle.net/VLRpc/2/

    InformationsquelleAutor RwwL

  2. 0

    Hier gehen Sie, ändern Sie einfach die margin-top-Wert in der linken Spalte, und alle sollten gut sein. Wenn Sie wollen mehr Inhalt in die Spalte, fügen Sie einige padding-top zu. Hier ist die geänderte css-Datei für:

    .container {
    width: 100%;
    height: 100%;
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}
.wrap {
    vertical-align: middle;
    display: table-cell;
    padding: 0;
    margin: 0;
    border: 1px solid red;
}

/* Columns */
.column {
    width: 45%;
    height: auto;
    text-align: center;
    border: 1px solid black;
    margin:0;
}
.right {
    margin-left:0;
    height: 250px;
    float: right;
    margin-right: 1em;
}
.left {
    float: left;
    margin-top: 50px;
    margin-left: 1.4em;
}
    Ich hoffe das ist was du gemeint hast, wenn nicht lass es mich wissen! 🙂
    Das einzige problem mit diesem ist, dass man die Spalten haben eine Feste Höhe. Und Sie wissen immer noch nicht die Höhe der anderen Spalte, so dass Sie nicht bekommen, stimmt die Zentrierung.
    Ich glaube nicht, Sie verstehen seine Frage, er will Sie vertikal auszurichten. Dies wird nur schieben Sie die linke Spitze nach unten 50px
    okay, tut mir Leid, dass. setzen kann er immer noch anpassen, die Polsterung, um es zu beheben leicht. Sry, ich habe es versucht. 🙂
    Ich bin nicht klopfen Sie, ich war nur zu sagen, Sie verstehen nicht die Frage

    InformationsquelleAutor Francis Hurtubise

Schreibe einen Kommentar