wake-up-neo.com

DIV und Text in Bootstrap vertikal ausrichten 4

Ich habe hier viele Fragen sowie viele Artikel und Bootstrap-4-Dokumentation durchlaufen, aber nicht gefunden, wonach ich gesucht habe.

DEMO: https://jsfiddle.net/zxLLqsm0/

Ich möchte Boxen mit exakt derselben Höhe für alle Spalten erstellen und den Text in den Boxen vertikal zentrieren. Ich habe es geschafft, den Text vertikal auszurichten, aber die Höhen der Boxen sind unterschiedlich.

Hier ist mein HTML

<div class="container">
  <div class="row align-items-center">
    <div class="col-4">
      <div class="box">
        <h6>Title 1</h6>
        <p>A small description</p>
      </div>
    </div>
    <div class="col-4">
      <div class="box">
        <h6>Title 2</h6>
        <p>A bigger description goes here</p>
      </div>
    </div>
    <div class="col-4">
      <div class="box">
        <h6>Title 3</h6>
        <p>A large description is placed here to make whatever changes we need.</p>
      </div>
    </div>
  </div>
</div>

Und mein CSS:

.container {
  margin-top: 15px;
}
.box {
  background-color: grey;
  padding: 15px;
}
3
Elaine Byene

Grundsätzlich wurde diese Frage bereits beantwortet .

Verwenden Sie flexbox und justify-content-center, um die box zentriert zu machen, und h-100 für height:100%...

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="box h-100 d-flex justify-content-center flex-column">
        <h6>Title 1</h6>
        <p>A small description</p>
      </div>
    </div>
    <div class="col-4">
      <div class="box h-100 d-flex justify-content-center flex-column">
        <h6>Title 2</h6>
        <p>A bigger description goes here</p>
      </div>
    </div>
    <div class="col-4">
      <div class="box h-100 d-flex justify-content-center flex-column">
        <h6>Title 3</h6>
        <p>A large description is placed here to make whatever changes we need.</p>
      </div>
    </div>
  </div>
</div>

https://www.codeply.com/go/VsyNMHZ8VG


Oder, wenn Sie die gleichen Änderungen an .boxstattdessen der Bootstrap-Klassen anwenden möchten ...

https://jsfiddle.net/g38e9Lfm/

.box {
  background-color: grey;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}
5
Zim

Sie können Standard-Bootstrap-Klassen hinzufügen und keine zusätzlichen CSS schreiben

 <div class="container">
  <div class="row">
    <div class="col-4">
      <div class="box d-table h-100 w-100">
        <div class="d-table-cell align-middle">
          <h6>Title 1</h6>
          <p>A small description</p>
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="box d-table h-100 w-100">
        <div class="d-table-cell align-middle">
          <h6>Title 2</h6>
          <p>A bigger description goes here</p>
        </div>
      </div>
    </div>
    <div class="col-4">
      <div class="box d-table h-100 w-100">
        <div class="d-table-cell align-middle">
          <h6>Title 3</h6>
          <p>A large description is placed here to make whatever changes we need.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Demo

3
Den Potapov

Ändern Sie die Klasse align-item-center für row-eq-height Weitere Informationen: http://getbootstrap.com.vn/examples/equal-height-columns/

Um dies zu verstehen, überprüfen Sie: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Und wenn Sie vertikal zentrieren möchten, können Sie den nächsten Code verwenden:

    .box {
      background-color: grey;
      padding: 15px;
      height: 100%;
      display: flex;
      flex-wrap:wrap;
      align-items: center;
      align-content:center;
      text-align:center;
      justify-content: center;
    }
0
Ivan Iyari

Hier ist ein Ansatz, ich hoffe, er wird Ihnen helfen.

.box{
  background-color: grey;
  padding: 15px;
  height: 200px; 
  display:table;
}

Bauen Sie Ihren Textteil unter einem neuen div mit class = "text" ein und fügen Sie dann css hinzu

.text{
display:table-cell;
vertical-align:middle;
}
0
Ash