layout changed live once

Question

我收到了一個幫助，使用一個「幫手」僞元素在一個盒子中對圖像進行了集中，這個元素一直在運行，直到我發佈它爲止。我不確定發生了什麼事。 你可以看到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

而使用柔性的圖像。在「.box」上你可以做

display:flex; 
justify-content: center; 

並刪除幫手。