html - 如何使用@media(最小宽度: 361px) and (max-width: 767px)?)在div中水平居中一个图像

Question

我想要水平居中的图像是 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 代码:

@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;}
}

Answer 1

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

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

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

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

没有magic numbers需要。