Unten kann das Bild im Jumbotrix nicht ausgerichtet werden

Ich versuche unten ein IMG in einem Jumbotrix auszurichten, aber ich kann es nicht herausfinden.Unten kann das Bild im Jumbotrix nicht ausgerichtet werden

<div class="jumbotron"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-8"> 
       <h1>Hello, world!</h1> 
       <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> 
       <p><a class="btn btn-primary btn-lg">Learn more »</a></p> 
      </div> 
      <div class="col-lg-4 text-center"> 
       <img src="http://via.placeholder.com/200x200"> 
      </div> 
     </div> 
    </div> 
</div>

Ich habe versucht, die folgenden CSS

.vertical-bottom { 
    display: flex; 
    align-items: bottom; 
}

Und dann Zugabe hinzugefügt, um die zusätzliche Klasse an den DIV das img enthält

<div class="col-lg-4 text-center vertical-bottom">

Das hat nicht funktioniert, warum ist es, so schwer, Dinge im Bootstrap vertikal auszurichten?

Quelle

2017-06-19 user13317

Das Problem liegt nicht bei Bootstrap. Das vertikale Zentrieren war halb schwierig, bis die Flex-Box unterstützt wurde. Bootstrap 4 ermöglicht jedoch die Verwendung von Flexbox-Klassen, die mit ihrem Spalten-/Gittersystem arbeiten. Zurück zu der Frage, welches Ergebnis willst du erreichen? Das Bild wird horizontal zentriert, aber unter dem Titel, Text und Knopf? –

@ hunter-mitchell Ich möchte das Bild horizontal zentriert und unten an der Seite des div mit dem Titel, Text und Knopf ausgerichtet sein. Also 1 Reihe mit 2 Spalten beide unten ausgerichtet. Ich dachte darüber nach, die Höhe des Divs mit Titel, Text und Button herauszufinden und dann den oberen Rand für das Bild festzulegen, um die untere Ausrichtung zu erhalten. Allerdings bin ich mir nicht sicher, wie ich die Höhe dieses div erreichen soll? – user13317

Bootstrap 4 hat ein wirklich gutes Grid-System mit Flexbox-Unterstützung. Ich würde empfehlen, sie zu verwenden (ohne dass Sie den Float auf beiden Spalten entfernen müssen und jede Spalte manuell positionieren, damit Sie die Kinderhöhe auf 100% setzen können). Wenn ich eine Veränderung bekomme, werfen Sie ein Beispiel nach oben. –

hier eine Art Code:

Bootply

Css: Die Medienabfrage wird auf 1200 gesetzt, weil ich sehe, Sie verwenden col-lg-xx

@media screen and (min-width:1200px) { 
    .flex_container img{ 
     object-fit: contain; 
     object-position: 100% 100%; 
    } 
    .flex_container { 
    display: flex; 
    } 
}

html:

<div class="jumbotron"> 
    <div class="container"> 
     <div class="row flex_container"> 
      <div class="col-lg-8"> 
       <h1>Hello, world!</h1> 
       <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p> 
       <p><a class="btn btn-primary btn-lg">Learn more »</a></p> 
      </div> 
      <div class="col-lg-4 text-center flex_container"> 
       <img src="http://via.placeholder.com/200x200" style=""> 
      </div> 
     </div> 
    </div> 
</div>

Quelle

2017-06-20 01:21:52 pbenard

Danke, das hat funktioniert! Aber ich könnte beginnen, zu Bootstrap 4 zu migrieren, scheint eine bessere flexbox-Unterstützung anzubieten, wie von @ hunter-mitchell vorgeschlagen. – user13317

Obwohl ich die Kontrolle über die horizontale Platzierung zu verlieren scheint. Das text_center tut nichts ... – user13317

@ user13317 benutze justify-content: center; anstelle von text-align: center; – pbenard

Unten kann das Bild im Jumbotrix nicht ausgerichtet werden

Antwort

Verwandte Themen