it-swarm.com.de

Vertikale Zentrierung von zwei <div class = "span6"> - Werten in Bootstrap

EDIT: Wollte nur klären, dass diese Spannweiten (wegen der Reaktionsfähigkeit) eine unbekannte Höhe haben!

Ich versuche, zwei <div class="span6">s innerhalb eines <div class="row"> in Bootstrap vertikal auszurichten, und ich habe Probleme mit einem meiner üblichen Tricks, wie display: inline-block; oder display: table-cell; (hier ist das JSFiddle, an dem ich gerade gearbeitet habe: http://jsfiddle.net/mA6Za/ ).

Folgendes habe ich versucht zu verwenden, was in Bootstrap nicht funktioniert:

<div class="container">
    <div class="row" style="display: table">
        <div class="span6" style="height: 300px; background: red; display: table-cell !important; vertical-align: middle;">
            Block 1 - Vertically center me please!
        </div>
        <div class="span6" style="height: 170px; background: blue; display: table-cell !important; vertical-align: middle;">
            Block 2- Center me too
        </div>
    </div>
</diV>

Ist es möglich, diese beiden .span6s vertikal so auszurichten, dass sowohl die Höhe von Block1 als auch Block2 unbekannt sind? Ich würde Bootstrap gerne wegen der verantwortlichen Funktionen verwenden, aber für Tablet + möchten wir, dass der Inhalt vertikal ausgerichtet wird.

14
Walker

Ich glaube nicht, dass Sie sehr deutlich machen, ob der Inhalt des der VARIABLE (- === -) vertikal zentriert sein soll oder das eigentliche div ist selbst . Auf jeden Fall gibt es für beide Optionen eine Lösung:

Vertikale Zentrierung der tatsächlichen div

Zuerst eine Lösung, die die div vertikal ausrichtet: jsFiddle

Es funktioniert durch Setzen von display: table; auf .container und display: table-cell; auf .row. Sobald dies erledigt ist, können Sie vertical-align: middle; auf .row setzen, um den Inhalt vertikal zu zentrieren.

Ich musste auch manuell erzwingen, dass die Breite von .row960px ist. Dies ist nicht sehr ansprechend (Sie könnten dies mit Medienabfragen beheben), aber der margin-left von -20px, den Bootstrap auf .row setzt, nicht Arbeit nach dem Setzen von display: table-cell; auf .row. Wenn Sie diesen zusätzlichen 20px nicht zwangsweise hinzufügen, wird der zweite div unter dem ersten div enden, da beide nicht mehr in dieselbe Zeile passen. Ich habe einige height: 100%;s für alle Elemente zu Demonstrationszwecken festgelegt.

CSS

.container {
    margin-top: 10px;
    display: table;
    height: 100%;
}
.row {
    min-width: 960px;
    display: table-cell;
    height: 100%;
    vertical-align:middle;
}

Vertikales Zentrieren des Inhalts von div

Wenn Sie den Inhalt der div vertikal zentrieren möchten, können Sie dies tun, indem Sie display: table; auf .row und display: table-cell; auf .span6 setzen. Sie müssten auch float: left; auf .span6 entfernen, indem Sie ihn auf float: none setzen.

Hier ist eine Geige, die diese Option demonstriert: jsFiddle

20

UPDATE

Also lag ich falsch, meine ursprüngliche Antwort funktioniert nicht und hier ist der Grund. Bootstrap wendet weiterhin einen float: left auf alle <div class="span*">-Elemente an.

/* From Bootstrap; some differences based on media query */
[class*="span"]
{
   float: left;
   min-height: 1px;
   margin-left: 30px;
}

Sie können diese Regeln überschreiben, indem Sie die .cell-Formatierung aus meiner ursprünglichen Antwort wie folgt ändern:

.cell
{
    display: table-cell;
    float: none;
    vertical-align: middle;
}

Sie verlieren dann jedoch das reaktionsschnelle "Stapeln" der Elemente auf kleinen Bildschirmen (was ich nicht für wünschenswert halte) und behalten stattdessen das Aussehen der "Tabelle" bei. Um dies zu verhindern, müssen Sie höchstwahrscheinlich den display: table; float: none;-Stil mit Ihren eigenen Medienabfragen bedingt machen.

Trotzdem bestand die Absicht von Bootstrap nicht darin, Inhalte als CSS-Tabelle anzuzeigen. Durch das Überschreiben von Stilen riskieren Sie andere "Bugs" in Ihre Anzeige.

Hier ist eine aktualisierte Geige zur Überprüfung: http://jsfiddle.net/7Y8Jv/3/

ORIGINAL ANTWORT

Sind Sie auf der Suche nach: http://jsfiddle.net/7Y8Jv/1/ ?

Mein Markup und meine Stile sehen nicht viel anders aus als Ihre, aber ich bekomme die vertikale Zentrierung, nach der Sie fragen.

Markup

<div class="container">
    <div class="row table">
        <div class="span6 cell">What Is Lorem Ipsum?</div>
        <div class="span6 cell">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </div>
</div>

CSS

.table
{
    display: table;
}

.cell
{
    display: table-cell;
    vertical-align: middle;
}
1
sellmeadog

Da Sie eine feste Höhe und nur eine einzige Zeile verwenden, können Sie einfach line-height verwenden.

.span6:first-child{
    line-height:300px;
}

.span6{
    line-height:170px;
}

Siehe Geige: http://jsfiddle.net/mA6Za/1/

1
user2019515

versuchen Sie dies http://jsfiddle.net/mA6Za/2/

<div class="container">
    <div class="row" style="display: table">
        <div class="span6" style="height: 300px; background: red; display: table-cell !important; position: absolute; top: 50%; margin-top: -150px; ">
            Block 1 - Vertically center me please!
        </div>
        <div class="span6 offset6" style="height: 170px; background: blue; display: table-cell !important; vertical-align: middle; top: 50%; margin-top: -85px ;  position: absolute " >Block 2- Center me too
        </div>
    </div>
</div>
1
Þaw

Verwenden Sie einige Tricks mit Jquery ...

1) Ermittle die Spannweite mit id

2) Berechne die Margin-Spitze

3) dann setze css

Es funktioniert auch bei der Fenstergröße.

DEMO auf jsfiddle ... http://jsfiddle.net/q49Da/

HTML

<div class="container"> 
    <div class="row">   
        <div id="red" class="span6" style="background: red;width:40%;float:left;margin-right:5%;">
            Block 1 - Vertically center me please!<br />
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
        </div>
        <div id="blue" class="span6" style="background: blue;width:40%;float:left;">
            Block 2- Center me too<br />
            Contrary to popular belief, Lorem Ipsum is not simply random text.
        </div>
    </div>
</div>

JQUERY

$(document).ready(function() {
    var ver_top = ($(window).height() - $('#red').height()) / 2;
    $('#red').css( "margin-top", ver_top+'px' );

    var ver_top2 = ($(window).height() - $('#blue').height()) / 2;
    $('#blue').css( "margin-top", ver_top2+'px' );

    $(window).resize(function(){
        var ver_top = ($(window).height() - $('#red').height()) / 2;
        $('#red').css( "margin-top", ver_top+'px' );

        var ver_top2 = ($(window).height() - $('#blue').height()) / 2;
        $('#blue').css( "margin-top", ver_top2+'px' );
    });
});
0
yeyene

Es klingt, als wollten Sie zwei Reihen, wobei jede Reihe die Hälfte des Bildschirms einnimmt.

Verwenden Sie offset3, um ein Viertel des Weges über Ihre Zeile zu verschieben (und sie dort zu platzieren, wo Sie sie haben möchten). Verwenden Sie span6 weiterhin in zwei separaten Zeilen:

<div class="container">
    <div class="row">
        <div class="offset3 span6">Block 1 - Vertically center me please!</div>
    </div>
    <div class="row">
        <div class="offset3 span6">Block 2- Center me too</div>
    </div>
</diV>

JSFiddle: http://jsfiddle.net/mA6Za/3/

0
pickypg