Wie setze ich ein Div neben ein Bild und zentriere es vertikal?

Question

Ich möchte wissen, wie man ein Bild neben einem div platziert und das div (Fortschrittsbalken) vertikal zentriert?

Was ich tun möchte:

Hier ist mein Code für den Fortschrittsbalken:

<div class="progressbar"> 
    <div class="skill"><span>HTML 5</span></div> 
</div> 

.progressbar { 
    background-color: black; 
    border-radius: 25px; 
    padding: 3px; 
    width: 200px; 
    } 

.progressbar > div { 
    background-color: #FDEE18; 
    width: 175px; 
    height: 20px; 
    border-radius: 10px; 
    } 

    .skill span { 
    padding-left: 10px; 
    } 

Answer 1

Sie können es mit display: table und display:table-cell; wie folgt aus:

CSS

img { height: 60px; display: table-cell; } 
#container { display: table;} 
.container-progress { display: table-cell; vertical-align: middle; padding-left: 10px;} 

HTML

<div id="container"> 
    <img src="http://lorempicsum.com/futurama/350/200/1" alt=""> 
    <div class="container-progress"> 
    <div class="progressbar"> 
     <div class="skill"><span>HTML 5</span></div> 
    </div> 
    </div> 
</div> 

Live example

Answer 2

versuchen, eine Tabelle für beide Elemente mit:

<table> 
 
     <tr align="center"> 
 
     <td align="center"> 
 
      <div> 
 
      <img src="http://images3.moneysavingexpert.com/images/small-claims-court.png"> 
 
      <div> 
 
     </td> 
 
     <td allign="center"> 
 
      <div> 
 
      <img src="http://www.catswhocode.com/blog/wp-content/uploads/2010/10/pure-css3-progress-bar.jpg"> 
 
      <div> 
 
     </td> 
 
     </tr> 
 
    </table>