在移动视图上重新定位图像

Question

我正在尝试在窗口大小达到＆lt; = 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;
   }
}