Question

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

我有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％宽度输入的评论 - 请检查这个小提琴：
https://jsfiddle.net/62b6prwo/

Answer 2

删除：float:left; 从除法中调整边距和填充以获得所需的输出。

Answer 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: absolute;
                                    left: 0;
                                    right: 0;
                                    margin: 4px 0 4px ;
                    ">
<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>

它将中间div设置为绝对，允许您使用left: 0;和right: 0;

将其移动到包装器的中心

Answer 4

这样可以使用边距设置，因此您可以在不使用负上边距的情况下定位第三张图像。

<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; text-align: center; ">
<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: absolute; right: 10px; margin-top: -35px; 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 5

删除中间div上的float:left;，并将边距更改为margin:auto;。

将div上的显示从display:block;更改为display:inline;，以便它们保持彼此相邻。

将中间图像更改为position:relative;并将top:4px;添加到垂直位置。

    <div style="position: relative;width: 100%;height: 40px;text-align: center;background-color: #373737;padding: 10px 0px;">
  <div style="
                                    display: inline;
                                    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;
                                    position: relative;
                                    margin:auto;

                    ">
    <img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg" style="width: 31px;height: 31px;border: none; position:relative; top:4px;" height="31px" width="111px">
  </div>
  <div style="
                                    display: inline;
                                    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>

请参阅： https://jsfiddle.net/ydufL6o2/4/

Answer 6

注意

内联样式是 NOT 样式元素的方式。它应该在样式表中或HTML style部分的head标记中完成。这是正确的代码。

基本上我通过添加ID和类来清理代码 A LOT 。

您需要做的是从float: left中间删除div属性。

之后，您必须将display: block;更改为display: inline-block，就像我在childDiv班div中所做的那样。

解决了这个问题，如本片段所示。

#parentDiv { position: relative; width: 100%; height: 40px; text-align: center; background-color: #373737; padding: 10px 0px; } .childDiv { display: inline-block; position: relative; margin: 4px 0px; } img { height: 31px; border: none; width: 31px; }

<div id="parentDiv"> <div class="childDiv" style="float: left; margin-left: 1.5%;"> <img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg"> </div> <div class="childDiv"> <img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg"> </div> <div class="childDiv" style="float: right; margin-right: 1.5%;"> <img src="https://thumb-cc.s3.envato.com/files/189105725/KMRS%20Thumbnail.jpg"> </div> </div>

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

6 个答案: