0
私は単に、bonus-left
の中心にギフトのイメージを垂直/水平にセンタリングしようとしています。私は正しい変換/変換メソッドを使用しています。親のdivにposition: relative
を追加しました。要素が垂直に整列していません
私の画像が垂直にセンタリングされない理由は誰に見えますか?
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
#review-bonus {
width: 99%;
border: 1px solid #CDCDCD;
background: #F7F7F7;
margin: 30px auto;
}
#review-bonus-inner {
padding: 20px;
}
#bonus-left,
#bonus-right {
display: inline-block;
}
#bonus-left {
width: 25%;
position: relative;
}
#bonus-left img {
width: 60%;
height: auto;
display: block;
margin: 0 auto;
}
#bonus-right {
vertical-align: top;
width: 75%;
}
#bonus-title,
#bonus-description,
#bonus-right li {
color: #303030;
line-height: 1.4em;
}
#bonus-title {
font-family: 'Source Sans Pro', sans-serif;
font-size: 2rem;
text-align: center;
margin-bottom: 15px;
}
#bonus-description {
font-family: 'Lato', sans-serif;
font-size: 1.2rem;
margin-bottom: 8px;
}
#bonus-right ul {
list-style-type: square;
}
#bonus-right li {
font-family: 'Lato', sans-serif;
font-size: 1rem;
margin: 0 0 5px 12px;
color: #575757;
}
<div id="review-bonus">
<div id="review-bonus-inner">
<div id="bonus-left">
<div class="total-center"><img src="http://www.iconarchive.com/download/i60915/himacchi/sweetbox/gift.ico"></div>
</div>
<div id="bonus-right">
<h3 id="bonus-title">FREE</h3>
<p id="bonus-description">f jdkl fnjfn rweofnrfnfndafndffn ddfd fdhfanjk herowf fhrgfndfndf wfefnanf fefnf f hqaf hef fewh f hfewanf f aWFH F HWEEFNDNADS ANDJFDNF E </p>
<ul>
<li>g erj iroehgnvfd f nvjvhrnvjf nevj nvonvrfvnfvn envdvn nfereonovfnjofnvf oegnpvnfdonvfognoa</li>
<li>fndj iofgh rionrn ;nn oej rejbnvofn noe revofnoa;gvan</li>
<li>h trhth thwgh 4t ththhthtw th aregtrhw</li>
<li>htr htrh twh htrh thth twhtr hwht w</li>
<li>grtg regh htrw hthtthwhth tr th twhw hhttwhtrh w h</li>
</ul>
</div>
</div>
</div>