我希望图像位于<div>的右侧,但垂直居中。
html - 如何垂直居中和右对齐图像?-LMLPHP
我希望它是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>

最佳答案

你很亲近
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>

关于html - 如何垂直居中和右对齐图像?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/35272087/

10-12 00:22
查看更多