-Center ein Bild vertikal innerhalb eines div für eine Spalte

Question

Dies ist, was ich derzeit haben:

  <div class="col-lg-10 col-lg-offset-1 text-center"> 
       <h2>Title</h2> 
       <hr class="small"> 
       <div class="row"> 
        <div class="col-md-6" id="logo"> 
         <div class="portfolio-item"> 
          <img class="img-portfolio img-responsive" src="logo.jpg"> 
         </div> 
        </div> 
        <div class="col-md-5" id="description"> 
         <div class="portfolio-item"> 
           Text 
         </div> 
        </div> 
       </div> 

Ich möchte auf der linken Seite das Bild im Inneren der Säule zu zentrieren zu können, aber ich bin mir nicht ganz sicher, Wie. Ich habe versucht, diesem hier zu folgen, aber es hat nicht richtig funktioniert. How to vertically align an image inside div

Answer 1

in Mutter div, fügen Sie diese Klasse:

col-lg-6 col-lg-push-6 

wie folgt aus:

<div class="col-lg-6 col-lg-push-6" id="logo"> 
    <div class="portfolio-item"> 
     <img class="img-portfolio img-responsive" src="logo.jpg"> 
    </div> 
</div> 

Answer 2

Sie portfolio-item Position relativ einstellen und img absolut zu positionieren und geben dem Bild top: 50%;transform: translateY(-50%)https://jsfiddle.net/pu4L80gq/

Sie können JS auch verwenden, um Bildcontainerhöhe und Bildhöhe zu bestimmen, um margin-top zu Bild oder padding-top zu dem Container zu geben:

(Bildcontainerhöhe - Bildhöhe) würde Ihnen den Ruhebereich im Container dann auf zwei teilen und mit diesem Wert können Sie Ihre Bildmitte vertikal https://jsfiddle.net/pu4L80gq/1/

$(document).ready(function() { 
    var imgContHeight = $('.img-container').height(); 
    var image = $('.img-container img'); 
    var imgHeight = image.height(); 

    image.css({ 
     marginTop: (imgContHeight - imgHeight)/2 
    }); 
}); 

Answer 3

Try this:

http://codepen.io/tiagofabre/pen/LNagaB

auch gibt es ein wirklich co ol Artikel über flex in diesem Link:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.vertical-center { 
 
    min-height: 100%; 
 
    min-height: 100vh; 
 

 
    display: flex; 
 
    align-items: center; 
 
}

<div class="col-lg-10 col-lg-offset-1 text-center"> 
 
    <h2>Title</h2> 
 
    <hr class="small"> 
 
    <div class="container-fluid col-md-6 vertical-center"> 
 
    <div class="col-sm-12 bg-green"> 
 
     <img class="img-responsive center-block" src="http://placeimg.com/100/100/animals" /> 
 
    </div> 
 
    </div> 
 
    <div class="container-fluid col-md-6 vertical-center"> 
 
    <div class="col-sm-12 bg-green"> 
 
     <div class="portfolio-item">Text</div> 
 
    </div> 
 
    </div> 
 
</div>