Question

如何在移动响应中心拍摄中心图像

这是我的index.html代码

    <div class="iteams">
<div class="width8 os-animation" data-os-animation="slideInRight" data-os-animation-delay="1.5s"><h2>our <br>products</h2> <img src="images/zig.png" alt=""/></div>
    </div>

这是我的responsive.css代码

@media only screen and (max-width: 767px) {
.iteams h2{
    text-align: center;
}
.iteams img{
    margin 0px auto;
    text-align: center;
}

Answer 1

要使图像居中，建议为父元素指定宽度。所以在你的情况下：

.iteams{width: 100%;}

Answer 2

将容器div .width8设置为margin: 0 auto;而非img（同样，您错过了}查询的结束@media

@media only screen and (max-width: 767px) {
  .iteams h2 {
    text-align: center;
  }
  .iteams .width8 {
    margin 0 auto;
    display: block;
    text-align: center;
  }
}

<div class="iteams">
  <div class="width8 os-animation" data-os-animation="slideInRight" data-os-animation-delay="1.5s">
    <h2>our <br>products</h2> 
    <img src="https://placehold.it/100x100" alt="" />
  </div>
</div>

Answer 3

使图像居中的一种方法是使用position：relative;左边：50％;和transform：translate（-50％）;而不是保证金：0px auto;

@media only screen and (max-width: 767px) {
  .iteams h2 {
    text-align: center;
  }
  .iteams .width8 {
    position: relative;
    left: 50%;
    transform: translate(-50%);
    display: block;
    text-align: center;
  }
}

<div class="iteams">
  <div class="width8 os-animation" data-os-animation="slideInRight" data-os-animation-delay="1.5s">
    <h2>our <br>products</h2> 
    <img src="https://placehold.it/100x100" alt="" />
  </div>
</div>

如何在移动响应中心拍摄中心图像

3 个答案: