我希望图像位于<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>
最佳答案
你很亲近
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/