0
我只是試圖將禮物圖像垂直/水平放置在bonus-left的中心。我正在使用正確的轉換/轉換方法。我將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>