Html 如何在图像旁边设置div并使其垂直居中？

我想知道如何将图像放置在div旁边，并将div（进度条）垂直居中

我想做的是：

以下是我的进度条代码：

<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;
  }

HTML 5
.progressbar{
背景色：黑色；
边界半径：25px；
填充：3倍；
宽度：200px；
}
.progressbar>div{
背景色：#FDEE18；
宽度：175px；
高度：20px；
边界半径：10px；
}
.技能跨度{
左侧填充：10px；
}

您可以使用

display:table

和

display:table cell如下所示：

CSS

HTML


HTML 5

您可以使用
display:table
和
display:table cell如下所示：

CSS

HTML


HTML 5

尝试为两个元素使用一个表：


尝试为两个元素使用一个表：



我还有一个问题，如何设置更多具有不同内容和img的进度条？像这样的：是的，像这样的。所以，如果我有10个进度条，那么我只需要一遍又一遍地复制html和css？有没有一种更简单的方法可以做到这一点，如果没有的话，一组代码重复10次，只是类名不同，这是不是一个问题？谢谢你可以使用动态语言，比如PHP，通过循环生成HTML，或者使用javascript在循环中附加内容。嗯，好吧，我明白了，再次感谢你的回答：）我还有一个问题，如何设置更多具有不同内容和img的进度条？像这样的：是的，像这样的。所以，如果我有10个进度条，那么我只需要一遍又一遍地复制html和css？有没有一种更简单的方法可以做到这一点，如果没有的话，一组代码重复10次，只是类名不同，这是不是一个问题？谢谢你可以使用动态语言，比如PHP，通过循环生成HTML，或者也可以使用javascript在循环中附加内容。嗯，好的，我明白了，再次感谢你的回答：）
img { height: 60px;  display: table-cell;  }
#container { display: table;}
.container-progress { display: table-cell; vertical-align: middle; padding-left: 10px;}

<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>