web-dev-qa-db-de.com

Richten Sie den Inhalt der Spalte Bootstrap 3 vertikal aus

Nachdem ich nach einer vierjährigen Pause wieder zur Webentwicklung zurückgekehrt war, fällt es mir schwer, den Inhalt einer Bootstrap-3-Spalte vertikal mit der nächsten Spalte abzugleichen. Ich habe versucht, diese Website sowie generische Suchen im Allgemeinen zu durchsuchen und habe einfach nicht die richtige Lösung gefunden ... oder meine Suchbegriffe sind schlecht. 

In HTML/CSS unten möchte ich den Text "Seitentitel" in der linken Spalte vertikal zentrieren. Ich möchte HTML und CSS während der Verwendung von Bootstrap 3 CSS so kurz wie möglich halten, daher denke ich, dass mir etwas einfaches fehlt.

HTML 

<div class="row page-header-box">
<div class="col-md-2 col-sm-2 col-xs-3 page-header-title">Page Title</div>
<div class="col-md-10 col-sm-10 col-xs-9 page-header-seperator">
    <div class="page-header-description"><small>Standard Text Description</small></div>
    <div class="page-header-alt"><small>Additional Text Description</small></div>
</div>

CSS

 .page-header-box {
 Hintergrundfarbe: # 3D3D3D; 
 border-bottom: 5px durchgehend # b3b5b8; 
 Rand unten: 10px; 
 } 
 .page-header-title {color: # f79239; text-align: right; vertical-align: middle; margin: 10px 0; } 
 .page-header-seperator {border-left: 5px solid # 4e2f91; Marge: 10px 0; } 
 .page-header-description {color: # febe10; } 
 .page-header-alt {margin-top: 5px; color: # 0093b2; } 
 

Hier ist ein jsFiddle ... http://jsfiddle.net/E6LcY/8/

Dies ist eines der wenigen Male, die ich je gepostet habe. Es wäre also toll, wenn ich mich in die richtige Richtung wende.

13
ACG

Ich überlegte mir, diese Frage zu löschen, dachte aber, die Antwort könnte für jemanden nützlich sein (wie ich), der nach einer möglichen Lösung sucht. 

Ich wollte innerhalb des Bootstrap 3-Frameworks bleiben und fügte JavaScript hinzu, um den "Titel" zentriert zu machen. Ich dachte mir, dass Bootstrap 3 im Grunde jQuery für einige Funktionen benötigt, also war es OK.

Ich bin mir sicher, dass es vielleicht einen besseren Weg gibt, aber die anderen Lösungen gefielen mir nicht. Danke an alle, die versucht haben, mich auf den richtigen Weg zu bringen.

HTML

<div class="row page-header-box">
<div class="col-md-2 col-sm-2 col-xs-3 page-header-title" id="header-title">Page Title</div>
<div class="col-md-10 col-sm-10 col-xs-9 page-header-seperator" id="header-seperator">
    <div class="page-header-description"><small>Standard Text Description Standard Text Description Standard Text Description Standard Text Description Standard Text Description Standard Text Description</small></div>
    <div class="page-header-alt"><small>Additional Text Description</small></div>
</div>
</div>

CSS

.page-header-box {
background-color:#3D3D3D;
border-bottom:5px solid #b3b5b8;
margin-bottom:10px;
}
.page-header-title { color:#f79239;text-align:right;margin-bottom:10px; vertical-align: middle; }
.page-header-seperator { border-left:5px solid #4e2f91;margin:10px 0; }
.page-header-description { color:#febe10; }
.page-header-alt { margin-top:5px;color:#0093b2; }

JS (mit jQuery)

var sep_height = '';
$(window).on("load resize", function(e) {
var seperatorHeight = $('#header-seperator').height();
if (seperatorHeight != sep_height) {
    sep_height = seperatorHeight;
    var titleHeight = $('#header-title').height();
    var difference = ((seperatorHeight - titleHeight) / 2) + 5;
    $('#header-title').css('margin-top', difference + 'px');
}
});

Hinweis: Die "sep_height" ist nur so, dass ich keine unnötigen Berechnungen anstelle und nur die Titelhöhe verändere, wenn ich muss. Ich füge dem oberen Rand zusätzlich 5px hinzu, um die Ränder des Beschreibungstextes auszugleichen.

Hier ist die neueste Geige (mit einem Fix für das onLoad-Ereignis): http://jsfiddle.net/E6LcY/15/

Nochmals vielen Dank an alle, die geholfen haben.

8
ACG

So mache ich es, du kannst es versuchen:

.Parentdiv{
position:relative;
width:100%;
height:100%;
}

.Parentdiv .childdiv{
position: absolute;
top:0;
bottom:0;
margin:auto;
}
0
Mirage

Fügen Sie die Regel: line-height: 45px; zur Klasse col-md-2 hinzu

AKTUALISIERTE FIDDLE

0
Danield

Ich fange an, in einigen Aspekten irgendwie von Bootstrap müde zu werden. Manchmal ist die Menge an Hacking, die erforderlich ist, um bestimmte Funktionen auszuführen, nicht die angeblichen Vorteile wert, die Sie durch die Verwendung dieser Funktion erhalten.

In diesem Fall beendete ich die Archivierung der benötigten Funktionalität, indem ich Bootstrap aufgab und eine Kombination von Flexboxen verwendete, wobei diese Eigenschaften auf das übergeordnete Element angewendet wurden:

.parent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

die an die Kinder:

.parent > div {
  display: inline-block;
  vertical-align: middle;
}

und diese Medienanfrage:

@media all and (max-width: 500px) {
  .parent {
    /* for small screens, we use column direction rather than row */
    flex-direction: column !important;
  }
}

Die HTML-Datei ist wie folgt:

<div class="parent">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Ich habe dies zum Beispiel für eine responsive Fußzeile verwendet. Sie spielen mit einer Kombination aus fester Breite und Rand (jeweils gleich) und werden je nach Breite des Bildschirms in verschiedenen Stückzahlen übereinander angeordnet, bis sie schmal genug ist, um sie nur in einer Reihe anzuzeigen . 

Meiner Meinung nach viel klarer, einfacher, sauberer und weniger Code, mit besserer Reaktionsfähigkeit, besserer Layoutunterstützung, Vermeidung von Javascript und ohne all den Overhead und Ärger von Bootstrap.

0
Pere