在显示中心对齐 img：inline-block 元素答案

【问题标题】：Aligning img in center of a display:inline-block element在显示中心对齐 img：inline-block 元素
【发布时间】：2017-08-29 19:17:45
【问题描述】：

我正在使用.total-center 的全局类来尝试将图像对齐bonus-left 的中心。由于某种原因，img 超出了容器 bonus-left...

有人知道为什么我的图片没有在bonus-left 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-right {
  width: 75%;
 } 

#bonus-left {
  width: 25%;
  position: relative;
}

#bonus-left img {
  width: 60%;
  height: auto;
  display: block;
  margin: 0 auto;
}

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

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

您需要了解一些关于 CSS 和 HTML 的知识才能理解我的调整：

浏览器实际上会渲染元素之间的空白。这就是为什么如果你的容器是 width:100% 而你的孩子是 width:25% 和 width:75%，它会换到下一行。如果您删除 HTML 中父子元素之间的空格，则非常适合。
如果您无法删除此空白，您可能需要使用 float 和“clearfix”hack。但由于我可以控制空白，我将仅以这种方式实现。
您不需要在图像周围使用包装器来使内容完全居中。这通常可以只用 CSS 来完成。在我的调整中，我告诉 img 是 width:100% 并且不关心高度或位置。对齐留给父母。
垂直对齐很棘手。在这种情况下，您需要将其视为适用于父母的所有兄弟姐妹。我告诉 bonus-left 和 bonus-right 都在中间垂直对齐，这意味着较高的将为较短的提供指导。只需将vertical-align:middle 赋予bonus-left 将默认为vertical-align:top for bonus-right，这意味着bonus-left 中间将与bonus-right 顶部垂直对齐。棘手棘手。

#review-bonus {
  width: 100%;
  border: 1px solid #CDCDCD;
  background: #F7F7F7;
  margin: 30px auto;
}

#review-bonus-inner {
  padding: 20px;
}

#bonus-left,
#bonus-right {
  display: inline-block;
  vertical-align: middle;
}
#bonus-right {
  width: 75%;
 } 

#bonus-left {
  width: 25%;
}

#bonus-left img {
  width: 100%;
}

<div id="review-bonus">
  <div id="review-bonus-inner"><div id="bonus-left">
      <img src="http://www.iconarchive.com/download/i60915/himacchi/sweetbox/gift.ico">
    </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>

【讨论】：

【解决方案2】：

在bonus-left 和bonus-right 上添加垂直对齐将解决此问题

#bonus-left,
#bonus-right {
  vertical-align: middle;
  display: inline-block;
}

您可能还想在图像上添加最大宽度。在宽屏上会太大而溢出。

【讨论】：

【解决方案3】：

添加垂直对齐：top to #bonus-right 将解决您的问题

 #bonus-left {
        width: 25%;
        vertical-align: top;
        position: relative;
    }

试试这个

【讨论】：