2016-08-17 43 views
2

ich vertikal versuche einen Text ausrichten neben einem Bild mit Twitter Bootstrap 3Vertically Text ausrichten neben Bild

<div class="col-sm-4"> 
    <img class="img-circle" src="http://dummyimage.com/100x100/000/fff"> 
    <h2> 
     Short title 
    </h2> 
</div> 

<div class="col-sm-4"> 
    <img class="img-circle" src="http://dummyimage.com/100x100/000/fff"> 
    <h2> 
     A longer title 
    </h2> 
</div> 

https://jsfiddle.net/DTcHh/23814/

Manchmal sind meine Titel auf einer Linie und manchmal sind sie auf zwei . Das bedeutet, dass ich keinen statischen Rand festlegen kann, um den Text vertikal zu zentrieren.

Was ist der beste Weg, dies zu erreichen und hat jemand ein Beispiel, das ich sehen kann?

+1

Ich habe eine Geige: https://jsfiddle.net/DTcHh/23817/ –

+0

Doppelte Frage zu https://stackoverflow.com/questions/489340/vertically-align-text-next-to- an-image? rq = 1 – SianiparD

Antwort

5

Sie haben Optionen für diese, aber einer von ihnen ist mit flex:

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 

 
body{margin: 10px;} 
 

 
img{float:left;margin-right:20px} 
 
.col-sm-4 > div { 
 
    display: flex; 
 
    align-items: center; 
 
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-sm-4"> 
 
<div> 
 
    <img class="img-circle" src="http://dummyimage.com/100x100/000/fff"> 
 
    <h2> 
 
     Short title 
 
    </h2> 
 
    </div> 
 
</div> 
 

 
<div class="col-sm-4"> 
 
<div> 
 
    <img class="img-circle" src="http://dummyimage.com/100x100/000/fff"> 
 
    <h2> 
 
     A longer title 
 
    </h2> 
 
    </div> 
 
</div>

+1

Perfekt, danke! – fightstarr20

0

Sie können einfach tun es durch die Flexbox Layout mit:

/* Layout */ 
 

 
.flex-container { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    
 
    -webkit-flex-direction: row; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    
 
    -webkit-flex-wrap: wrap; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
    
 
    -webkit-align-items: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.flex-column { 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    
 
    -webkit-flex-grow: 0; 
 
    flex-grow: 0; 
 
    
 
    -webkit-flex-shrink: 0; 
 
    flex-shrink: 0; 
 
    
 
    -webkit-box-orient: vertical; 
 
    -moz-box-orient: vertical; 
 
    
 
    -webkit-box-flex: 0; 
 
    -moz-box-flex: 0; 
 
} 
 

 
.flex-column-auto { 
 
    -webkit-flex-grow: 1; 
 
    flex-grow: 1; 
 
    
 
    -webkit-flex-basis: 0; 
 
    -ms-flex-preferred-size: 0; 
 
    flex-basis: 0; 
 
    
 
    width: auto; 
 
    max-width: 100%; 
 
} 
 

 
/* Style */ 
 

 
.image { 
 
    border-radius: 50px; 
 
} 
 

 
.header { 
 
    padding: 20px; 
 
}
<div class="flex-container"> 
 
    <div class="flex-column flex-column-auto"> 
 
    <!-- Article --> 
 
    <article> 
 
     <div class="flex-container"> 
 
     <div class="flex-column"> 
 
      <img src="http://dummyimage.com/100x100/000/fff" alt="Image" class="image"> 
 
     </div> 
 
     <div class="flex-column flex-column-auto"> 
 
      <header class="header"> 
 
      <h2>A short title</h2> 
 
      </header> 
 
     </div> 
 
     </div> 
 
    </article> 
 
    </div> 
 
    
 
    <div class="flex-column flex-column-auto"> 
 
    <!-- Article --> 
 
    <article> 
 
     <div class="flex-container"> 
 
     <div class="flex-column"> 
 
      <img src="http://dummyimage.com/100x100/000/fff" alt="Image" class="image"> 
 
     </div> 
 
     <div class="flex-column flex-column-auto"> 
 
      <header class="header"> 
 
      <h2>A long long long long title</h2> 
 
      </header> 
 
     </div> 
 
     </div> 
 
    </article> 
 
    </div> 
 
    
 
    <div class="flex-column flex-column-auto"> 
 
    <!-- Article --> 
 
    <article> 
 
     <div class="flex-container"> 
 
     <div class="flex-column"> 
 
      <img src="http://dummyimage.com/100x100/000/fff" alt="Image" class="image"> 
 
     </div> 
 
     <div class="flex-column flex-column-auto"> 
 
      <header class="header"> 
 
      <h2>A super long long long long long title</h2> 
 
      </header> 
 
     </div> 
 
     </div> 
 
    </article> 
 
    </div> 
 
</div>

Fiddle: https://jsfiddle.net/pavelrich/f5hyvbwq/

Verwandte Themen