html - 如何将第二张图片移动到 div [响应式设计] 的中心？

Question

如何将第二张图片移动到 div 的中心 [响应式设计]？

https://jsfiddle.net/ydufL6o2/

我有3张图片，

第一个图像位置在左边。没关系。

第三个图像位置是正确的。没关系。

但是我对第二张图片有疑问，如何将第二张图片移动到中心 [响应式设计]？

<div style="position: relative;width: 100%;height: 40px;text-align: center;background-color: #373737;padding: 10px 0px;">
<div style=" display: block; position: relative; margin: 4px 0px; float: left; margin-left: 1.5%;">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="/* margin: 16px auto; */height: 31px;border: none;width: 31px;" height="31px" width="111px">
</div>
<div style=" display: block; position: relative; margin: 4px auto; float: left; ">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="width: 31px;height: 31px;border: none;" height="31px" width="111px">
</div>
<div style=" display: block; position: relative; margin: 4px 10px; float: right; margin-right: 1.5%; ">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="/* margin: 16px auto; */height: 31px;border: none;width: 31px;" height="31px" width="111px">
</div>
</div>

Answer 1

如果您想让元素居中，您可以使用 margin: 0 auto，但是 - 由于您的元素被阻塞，它将占用 100% 的宽度。

您可以将该元素更改为 inline-block，然后使用 margin: 0 auto 来完成此操作。

<div style="position: relative;width: 100%;height: 40px;text-align: center;background-color: #373737;padding: 10px 0px;">
<div style=" display: block; position: relative; margin: 4px 0px; float: left; margin-left: 1.5%;">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="/* margin: 16px auto; */height: 31px;border: none;width: 31px;" height="31px" width="111px">
</div>
<div style=" display: inline-block; position: relative; margin: 4px auto; ">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="width: 31px;height: 31px;border: none;" height="31px" width="111px">
</div>
<div style=" display: block; position: relative; margin: 4px 10px; float: right; margin-right: 1.5%; ">
<img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="/* margin: 16px auto; */height: 31px;border: none;width: 31px;" height="31px" width="111px">
</div>
</div>

关于中心 100% 宽度输入的评论 - 检查这个 fiddle :
https://jsfiddle.net/62b6prwo/