html - 在移动 View 上重新定位图像

Question

我试图在窗口大小达到 <= 700px 时放置图像。

但是我无法让图像在我想要的位置居中，它继续留在左边。

这是我的代码: http://www.bootply.com/7LaUTsPSG4

/* CSS used here will be applied after bootstrap.css */

.noFix {
  background-color: #363535;
  padding: 10px;
  margin-bottom: 10px;
}
.noFixTable {
  margin-left: auto;
  margin-right: auto;
  vertical-align: top;
}
.about {
  vertical-align: top;
}
.noFixTable p {
  color: white;
  height: auto;
  min-height: 200px;
  border: 1px solid white;
  max-width: 400px;
  width: auto;
  text-align: justify;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: -5px;
}
.noFixTable h3,
.noFixTable h4 {
  color: white;
  text-align: left;
  margin-left: 20px;
  font-size: 25px;
}
.noFixTable td {
  text-align: center;
  width: auto;
}
#fixIMG {
  width: 400px;
  height: auto;
}
#repairIMG {
  width: 400px;
  height: auto;
  margin-top: 10px;
}
.noFixTable hr {
  margin-left: 20px;
  margin-right: 20px;
  border: 2px solid white;
  margin-top: -2px;
  width: auto;
}
.noFixTable #hrInner {
  margin-top: -24px;
  max-width: 100px;
  width: auto;
  border-color: #0076ff;
}
.noFixTable h3 {
  color: white;
  background-color: #27A9DF;
  max-width: 250px;
  width: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 20px;
  text-align: center;
}
.noFixTable h3:hover {
  background-color: #1a9fd6;
  cursor: pointer;
}
.noFixTable a {
  color: white;
  text-decoration: none;
}
@media screen and (max-width: 700px) {
  #repairIMG {
    display: none;
  }
  #fixIMG {
    border: 1px solid blue;
  }
}

<div class="noFix">

  <table class="noFixTable" align="center">

    <tbody>
      <tr>
        <td>
          <img id="fixIMG" src="images/nofix.jpg" alt="No Fix, No Fee Service">
        </td>

        <td class="about" rowspan="2">
          <h4>About Us</h4>
          <hr>
          <hr id="hrInner">
          <p>
            Computer-Repair-Service.co.uk is located in and around London. Our discreet computer and laptop repair service offers the highest quality for all our customers and our goal is to provide the best possible service, fixing any problems in the shortest space
            of time possible. We are always training to perfect our delivery so that we can offer the very best in customer care to all our clients. We guarantee to fix and repair your computers, laptops and electronic gadgets and will satisfy all your
            technological needs. No matter your how big or small the problem is, we guarantee to fix it!
          </p>

          <h3><a href="Services.html">Check our Services Page</a></h3>

        </td>

      </tr>

      <tr>
        <td>
          <img id="repairIMG" alt="Repair" src="images/repair.jpg">
        </td>

      </tr>
    </tbody>
  </table>

</div>

目前图片只在左边:

这就是我想要的:

Answer 1

请检查这是否有效。

@media (max-width:700px){
   .noFixTable td{
      display: block;
   }
   .noFixTable h3{
      margin: 20px auto 10px;
   }
}