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

The image I want to center horizontally is the frame1.png. It doesn't center well using margin-left:40%;or any other percentages. HTML CODE:

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

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

CSS CODE:

CSS代码：

@media (min-width: 361px) and (max-width: 767px)
{
    .content-img img{max-width: 300px; max-height:300px; }
    .content-text{text-align: center;}
    .content-img img{margin-left:40% !important;}
    .content-img{max-width: 700px;}
}

3 个解决方案

#1

I changed this, so it is more transparent it centers the image inside...

我改变了这个，所以它更透明，它将图像置于里面......

Maybe I don't understand what you want to achieve. If you want to center the container it is in then apply it to the container... etc. At least when I tried it it worked...

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

First delete this:

首先删除这个：

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

Then paste:

然后粘贴：

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

So it looks like this:

所以它看起来像这样：

.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 %}

#2

You can simply center your image like this:

你可以像这样简单地居中你的形象：

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

Or, if have margin-top and/or margin-bottom values you want to preserve:

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

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

No magic numbers needed.

不需要魔法数字。

#3

add style to image under media query

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

img{
   margin: 0 auto;
}

要么

Add

加

img{
    display: inline-block
}

nothing more need to change

没有什么需要改变的

#1