So richten Sie Text vertikal im Panel mit Bootstrap 3

Question

Ich habe ein Bild und eine Beschreibung eines panel panel-default. Das Bild wird nach links gezogen und die Beschreibung befindet sich auf der rechten Seite.

Das Bild hat die img-responsive Klasse, also wenn ich die Größe des Fensters passt es den Panel Körper passt.

Die Frage ist, wie kann ich den gleichen Effekt mit der Beschreibung erreichen. Ich möchte es vertikal auf das Panel ausrichten und wenn ich das Fenster verkleinere, sollte es auch auf den Panel-Körper passen.

Was ich bisher versucht:

.container { 
 
    padding-top: 30px; 
 
} 
 

 
p { 
 
    font-size: 2vw; 
 
} 
 

 
.panel { 
 
    border-radius: 0; 
 
} 
 

 
.panel-body { 
 
    padding: 0; 
 
} 
 

 
.panel-description { 
 
    margin-top 12px; 
 
    padding-left: 3px; 
 
} 
 

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

 
.no-padding { 
 
    padding: 0; 
 
} 
 

 
.no-padding-right { 
 
    padding-right: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-4 col-lg-4"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
      Basic panel example 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-4 col-lg-4"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
      <div class="row"> 
 
      <div class="col-sm-4 col-md-4 no-padding-right"> 
 
       <div class="panel-image"> 
 
       <img src="http://via.placeholder.com/150x150" class="img-responsive" alt="img"> 
 
       </div> 
 
      </div> 
 
      <div class="col-sm-8 col-md-8 no-padding"> 
 
       <div class="panel-description vertical-center"> 
 
       <p>Name<br>Surname</p> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-4 col-lg-4"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
      Basic panel example 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Ich habe

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

zum .panel-description aber es funktioniert nicht.

Was ist die beste Lösung für dieses Problem?

https://jsfiddle.net/DTcHh/39282/

Answer 1

Ich habe in Ihrem Code wenig verändert und seine gut funktioniert jetzt. Hier ist der aktualisierte Code für Ihre Referenz

.container { 
 
    padding-top: 30px; 
 
} 
 

 
p { 
 
    font-size: 2vw; 
 
} 
 

 
.panel { 
 
    border-radius: 0; 
 
} 
 

 
.panel-body { 
 
    padding: 0; 
 
} 
 

 
.panel-description { 
 
    margin-top 12px; 
 
    padding-left: 3px; 
 
} 
 

 
.no-padding-right { 
 
    padding-right: 0; 
 
} 
 

 
.main-class { 
 
    display: flex; 
 
    width: 100%; 
 
    flex-wrap: wrap; 
 
    align-items: center; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-4 col-lg-4"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
      Basic panel example 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-4 col-lg-4"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
      <div class="row"> 
 
      <div class="main-class"> 
 
       <div class="col-sm-4 col-md-4 no-padding-right"> 
 
        <div class="panel-image"> 
 
        <img src="http://via.placeholder.com/150x150" class="img-responsive" alt="img"> 
 
        </div> 
 
       </div> 
 
       <div class="col-sm-8 col-md-8 no-padding"> 
 
        <div class="panel-description vertical-center"> 
 
        <p>Name<br>Surname</p> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-4 col-lg-4"> 
 
     <div class="panel panel-default"> 
 
     <div class="panel-body"> 
 
      Basic panel example 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>