Wie behalte ich ein Bild und Text vertikal zentriert mit Bootstrap?

Ich arbeite an einer Bootstrap-Site und bin jetzt in einem Abschnitt, wo ich versuche, Text auf der linken Seite und ein Bild auf der rechten Seite zu machen. Ich habe das alles verloren, aber es fällt mir sehr schwer, das Bild vertikal zu zentrieren. Ich bin mit den Polsterungen und Rändern beschäftigt, aber es kommt immer funky heraus.Wie behalte ich ein Bild und Text vertikal zentriert mit Bootstrap?

Hier ist ein Bild von dem, was ich tue:

für diesen Abschnitt mein Code hier:

HTML

<!-- Section 1 --> 
<div class="cssSection cssCenter"> 
    <div class="container"> 

     <div class="row"> 
      <div class="col-sm-7"> 
       <p class="cssInformation">Nam ut tempus lacus, nec porttitor lacus. Integer sit amet lacus risus. Sed pretium justo justo, a faucibus justo pellentesque ac. Nulla lorem ipsum, blandit quis porttitor nec, vestibulum sit amet dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras semper fermentum risus, a volutpat nisi interdum eu.</p> 
      </div> 

      <div class="col-sm-5"> 
        <img class="img-center img-responsive" src="http://placehold.it/300x300"> 
      </div> 
     </div> 

    </div> 
</div>

CSS

.cssCenter { 
    text-align: center; 
} 

.cssSection { 
    padding: 120px 0 70px; 
} 

.cssInformation { 
    font-size: 18px; 
} 

.img-center { 
    margin: auto; 
}

Kann mir jemand helfen, zu verstehen, wie ich das Bild richtig auf den linken Text ausrichten kann? Es wird sehr geschätzt werden.

Vielen Dank im fortgeschrittenen

Quelle

2016-08-09 Asem H

Versuchen Sie dies und lassen Sie mich bitte mit Ihrem Feedback wissen!

ein Flexbox wie folgt verwendet:

.cssSection .row { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    align-content: center; 
    flex-direction: row; 
}

und für reaktions Anforderung, ich habe dies:

@media only screen and (max-width: 650px) { 

    .cssSection .row { 
     flex-direction: column; 
    } 
}

.cssCenter { 
 
    text-align: center; 
 
} 
 

 
.cssSection { 
 
    padding: 120px 0 70px; 
 
} 
 

 
.cssSection .row { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    align-content: center; 
 
    flex-direction: row; 
 
} 
 

 
.cssInformation { 
 
    font-size: 18px; 
 
} 
 

 
.img-center { 
 
    margin: auto; 
 
} 
 

 
@media only screen and (max-width: 650px) { 
 

 
    .cssSection .row { 
 
     flex-direction: column; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<body> 
 
<!-- Section 1 --> 
 
<div class="cssSection cssCenter"> 
 
    <div class="container"> 
 

 
     <div class="row"> 
 
      <div class="col-sm-7"> 
 
       <p class="cssInformation">Nam ut tempus lacus, nec porttitor lacus. Integer sit amet lacus risus. Sed pretium justo justo, a faucibus justo pellentesque ac. Nulla lorem ipsum, blandit quis porttitor nec, vestibulum sit amet dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras semper fermentum risus, a volutpat nisi interdum eu.</p> 
 
      </div> 
 

 
      <div class="col-sm-5"> 
 
        <img class="img-center img-responsive" src="http://placehold.it/300x300"> 
 
      </div> 
 
     </div> 
 

 
    </div> 
 
</div> 
 
    </body>

Quelle

2016-08-09 02:15:05 kukkuz

Ich habe versucht, diese auf meiner Seite und es funktionierte einwandfrei. Vielen Dank –

Wie behalte ich ein Bild und Text vertikal zentriert mit Bootstrap?

Antwort

Verwandte Themen