Vertikaler mittlerer Inhalt in div?

Ich benutze Bootstrap. Hat der Bootstrap-Selektor den Text in der Mitte und nicht in der Mitte platziert?Vertikaler mittlerer Inhalt in div?

Siehe Beispiel: https://jsfiddle.net/DTcHh/23497/

Können Sie Create user accounts for your staff sind an der Spitze sehen, die in der Mitte mit einem Knopf aufgereiht sein sollten.

Wie im Bootstrap?

<div class="row"> 
    <div class="col-md-8"> 
     Create user accounts for your staff. 
    </div> 
    <div class="col-md-4"> 
     <div class="clearfix"> 
      <div class="pull-right"> 
       <a class="btn btn-lg btn-primary " href="#">Add Staff</a> 
      </div> 
     </div> 
    </div> 
</div>

Quelle

2016-08-09 I' ll-Be-Back

Bootstrap fehlt native Unterstützung für das, was Sie erreichen möchten. Die Verwendung von 'flexbox' für Ihr Grid funktioniert möglicherweise abhängig von der Browserunterstützung, die Sie anbieten müssen. Was hast du bisher versucht? –

@Robertc Ich habe 'vertical-align: mitte' und kein Glück versucht. –

Das liegt daran, dass 'col-md-8' und' col-md-4' nicht die gleiche "Höhe" haben. Hier hat "flexbox" einen Vorteil; Sie können es so konfigurieren, dass es gleiche Höhen anwendet. –

Wenn Sie das haben Fähigkeit flex verwenden Sie können Bootstrap verlängern nur ein bisschen einfacher mit CSS eine vertikale flexbox Lösung zu unterstützen:

.row.row-vertical { 
 
\t display: flex; 
 
\t align-items: center; 
 
\t justify-content: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row row-vertical"> 
 
    <div class="col-md-8"> 
 
     Create user accounts for your staff. 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="clearfix"> 
 
      <div class="pull-right"> 
 
       <a class="btn btn-lg btn-primary " href="#">Add Staff</a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Hinweis: Sie können hier mehr über FlexBox und seine Unterstützung lesen: http://caniuse.com/#feat=flexbox

Quelle

2016-08-09 15:29:07

-2

diese Regeln zu Ihrem CSS hinzufügen

.col-md-8,.col-md-4{ 
    display:inline-block !important; 
    vertical-align:middle !important; 
    } 
    .col-md-4{ 
    float:right !important 
    }

Es ist ratsam, eine ID zu Ihren spezifischen HTML-Elemente hinzufügen, diese CSS-Regeln zu Ihrem ids.good Glück zu verhindern Bootstrap brechen und fügen ...

Quelle

2016-08-09 15:14:23 repzero

Diese Antwort würde Bootstrap Grid für jeden Zweck außerhalb dieser Instanz grundlegend brechen. Ich würde empfehlen, eine zukunftssichere Lösung bereitzustellen, die auf zusätzlichen Klassen beruht, anstatt die Rahmenfunktionalität außer Kraft zu setzen und "! Wichtig" auf alle Dinge zu legen. –

warum die downvote fügen Sie diese zu einem jsfiddle am unteren Rand der Geige zur Verfügung gestellt und sehen Sie die Ergebnisse .... – repzero

@ Robert C..haben Sie in meiner Antwort gesehen ich eine wichtige "auf alle Dinge", wie Sie sagten ...? – repzero

.row .col-md-4, 
 
.row .col-md-8{ 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row row-vertical"> 
 
    <div class="col-md-8"> 
 
     Create user accounts for your staff. 
 
    </div> 
 
    <div class="col-md-4"> 
 
     <div class="clearfix"> 
 
      <div class="pull-right"> 
 
       <a class="btn btn-lg btn-primary " href="#">Add Staff</a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Quelle

2016-08-09 15:19:28

Ich habe die Antwort mit dem Snippet aktualisiert.Ich dachte zuerst ist ok ohne, weil die CSS wenige Zeilen haben, aber ich sah das andere Beispiel, und ich wollte hier auch hinzufügen. Danke @RobertC. –

Antwort

Verwandte Themen