html - 元素未垂直对齐

Question

我只是想将礼物图像垂直/水平地置于 bonus-left 的中心。我正在使用正确的转换/翻译方法。我将 position: relative 添加到其父 div。

有人知道为什么我的图片没有垂直居中吗？

.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>

Answer 1

我已经编辑了您现有的代码片段。现在可以了。希望能帮助到你!

.total-center {
  text-align: center !important;
}

#review-bonus {
  width: 99%;
  border: 1px solid #CDCDCD;
  background: #F7F7F7;
}

#bonus-left {
  //width: 25%;   // the line causing the issues
}

#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>