如何使用@media（最小宽度：361px）和（最大宽度：767px）将一个图像水平居中在div中？

Question

我想要水平居中的图像是frame1.png。使用margin-left不能很好地集中：40％;或任何其他百分比。 ＆＃xA; HTML CODE：

＆＃xA;＆＃xA;

 ＆lt; div id =“contents”＆gt;＆＃xA; ＆lt; div class =“content”＆gt;＆＃xA; ＆lt; div class =“content-about”＆gt;＆＃xA; ＆lt; div class =“wrapper”＆gt;＆＃xA; ＆lt; div class =“content-header”＆gt;＆＃xA; ＆lt; h2 class =“font-GreatVibes”＆gt;关于＆lt; span class =“font-GaramondPremierePro magenta”＆gt; RESTO NAME＆lt; / span＆gt;＆lt; / h2＆gt;＆＃xA; ＆lt; h3 class =“font-CormorantGaramond”＆gt; Lorem Ipsum Dolor Sit Amet，cnsectetur adipisicing elit。 ＆LT; / H3＆GT;＆＃XA; ＆LT; / DIV＆GT;＆＃XA; ＆lt; div class =“content-content”＆gt;＆＃xA; ＆lt; div class =“row”＆gt;＆＃xA; ＆lt; div class =“col-xs-12 col-sm-6 col-md-6 content-img”＆gt;＆＃xA; ＆lt; img src =“img / frame1.png”class =“img-responsive”/＆gt;＆＃xA; ＆LT; / DIV＆GT;＆＃XA; ＆lt; div class =“col-xs-12 col-sm-6 col-md-6 content-text”＆gt;＆＃xA; ＆lt; h3 class =“font-CormorantGaramond”＆gt; Lorem Ipsum Dolor Sit Amet＆lt; / h3＆gt;＆＃xA; ＆lt; p class =“font-CormorantGaramond”＆gt; Cnsectetur adipisicing elit，sed do eiusmod tempor incididunt＆lt; br /＆gt; ut labore et dolore magna aliqua。 Ut enim ad minim veniam，＆lt; br /＆gt; quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea＆lt; br /＆gt;商品问题。 Duis aute irure dolor in reprehenderit in＆lt; br /＆gt; vanptit velit esse cillum dolore eu fugiat nulla pariatur。＆lt; br /＆gt; Excepteur sint occaecat cupidatat non proident，sunt in culpa＆lt; br /＆gt; qui officia deserunt mollit anim id est laborum。＆lt; / p＆gt;＆＃xA; ＆lt; p class =“font-CormorantGaramond”＆gt; Sed ut perspiciatis unde omnis iste natus error sit voluptatem＆lt; br＆gt; accusantium doloremque laudantium，totam rem aperiam，＆lt; br＆gt; eaque ipsa quae ab illo inventore veritatis et quasi architecto＆lt; br＆gt; beatae vitae dicta sunt explicabo。 ＆LT; / P＆GT;＆＃XA; ＆LT; / DIV＆GT;＆＃XA; ＆LT; / DIV＆GT;＆＃XA; ＆LT; / DIV＆GT;＆＃XA; ＆LT; / DIV＆GT;＆＃XA; ＆LT; / DIV＆GT;＆＃XA; ＆LT; / DIV＆GT;＆＃XA; ＆lt; / div＆gt;＆＃xA;  

＆＃xA;＆＃xA;

CSS代码：

＆＃xA;＆＃xA;

  @媒体（最小宽度：361px）和（最大宽度：767px）＆＃xA; {＆＃xA; .content-img img {max-width：300px;最大高度：300像素; }＆＃XA; .content-text {text-align：center;}＆＃xA; .content-img img {margin-left：40％！important;}＆＃xA; .content-img {max-width：700px;}＆＃xA;}＆＃xA;  

＆＃xA;

Answer 1

您可以像这样简单地将图像居中：

img {
  display: block;
  margin: 0 auto;
}

或者，如果您要保留margin-top和/或margin-bottom值：

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

不需要magic numbers。

Answer 2

我改变了这一点，所以它更加透明，它将图像集中在......

也许我不明白你想要达到的目的。如果你想将容器放在中心位置然后将它应用到容器中......等等。 至少当我尝试它时它起作用了......

首先删除它：

.content-img img{margin-left:40% !important;}

然后粘贴：

.content-img img{display: block; margin: auto; width: 40 %}

所以它看起来像这样：

.content-img img{max-width: 300px; max-height:300px; }
.content-text{text-align: center;}
.content-img{max-width: 700px;}
.content-img img{display: block; margin: auto; width: 40 %}

Answer 3

在媒体查询下为图像添加样式

img{
   margin: 0 auto;
}

或

添加

img{
    display: inline-block
}

不再需要改变