レイアウトが一度公開されたライブ

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

：そして、これは私がレイアウト

コードのために使用したコードです。 「黒四角」で、あなたは

display:flex; 
justify-content: center; 

を行うと、ヘルパーを削除することができます。