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

Question

我想知道如何将图像放在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;
  }

Answer 1

您可以使用display: table和display:table-cell;执行此操作：

  

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

尝试对两个元素使用表格：

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