html - 如何垂直居中和右对齐图像？

Question

我希望图像位于 <div> 的右侧但垂直居中。

我希望它是 Flexbox 或尽可能简单。

#container1 {
  width: auto;
  height: auto;
}
#div1 {
  width: 400px;
  height: 200px;
  border: 1px solid black;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: center;
}
#some_image {
  width: 50px;
  height: 25px;
}

<div id="container1">
  <div id="div1"><img id="some_image" src="some_image.gif"></div>

Answer 1

你很接近

Flexbox 解决方案

#div1 {
      width: 400px;
      height: 200px;
      margin: 1em auto;
      border: 1px solid black;
      display: flex;
      align-items: center;       /* vertical center */
      justify-content: flex-end; /* far right */
}

#some_image {
     width: 50px;
      height: 25px;
}

<div id="div1">
  <img id="some_image" src="http://lorempixel.com/image_output/abstract-q-c-50-25-6.jpg">
</div>