html - 现场发布后布局更改

Question

我收到了使用“helper”伪元素元素将图像居中放置在框中的帮助，在我发布它之前一直有效。我不确定发生了什么。 你可以在 live link 查看发生了什么.这是我用于布局的代码

代码:

.offer {
  width: 288px;
  float: left;
  margin-right: 25px;
}
.box {
  position: relative;
  display: block;
  border: solid 3px #19468d;
  height: 310px;
  width: 100%;
  margin-top: 11px;
  text-align: center;
}
.price span {
  font-family: avenir next;
  font-weight: 700;
  background-color: #19468d;
  color: white;
  font-size: 21px;
  padding: 0px 5px;
  left: 0;
  padding-left: 0;
}
.price a {
  position: relative;
  font-family: avenir next;
  font-weight: 700;
  background-color: #19468d;
  color: white;
  font-size: 21px;
  padding: 1px 7px;
  left: 3px;
  bottom: 1px;
  border-style: solid;
  border-color: #19468d;
}
.price a:hover {
  color: #19468d;
  background-color: white;
  border-style: solid;
}
#cost {
  position: absolute;
  left: 0px
}
#info {
  position: absolute;
  bottom: 0px;
  right: 0px
}
.box img {
  display: inline-block;
  margin: 0 auto;
  text-align: center;
  max-width: 252px;
  vertical-align: center;
}
#grid {
  margin: 0px;
  display: flex;
  display: -webkit-flex;
  /* Safari 8 */
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  /* Safari 8 */
  -webkit-justify-content: center;
  /* Safari 8 */
  margin-left: 20px;
}
.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.price {
  text-align: left
}
.price #dollar {
  padding-right: 0px;
  padding-left: 5px;
}

<div class="offer">
  <div class="box">
    <div class="price">
      <span id="dollar">&#36;</span><span>27</span>
    </div>
    <span class="helper"></span>
    <img src="http://cdn2.hubspot.net/hubfs/75704/JPs-Slices/2016_Yes/img/floorexammat.jpg">
    <div class="price" id="info">
      <a href="http://www.google.com" id="buy-now">Buy Now</a>
    </div>
  </div>

Answer 1

而是对图像使用 flex。在“.box”上你可以做

display:flex;
justify-content: center;

并删除助手。