html - One img aligned on the left, and one on the center, both vertically aligned, inside same div -

i struggling aligning 2 imgs in same div. want 1 aligned on left, , other in center. suggestion?

div {      background: red;      text-align: center;  }  div img{      vertical-align: middle;  }  .left {     float:left;  }

<div>      <img src="//placehold.it/50x50" class="left" />      <img src="//placehold.it/50x50" />  </div>