Question

我正在使用.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>

Answer 1

要了解我的调整，您需要了解有关CSS和HTML的一些事项：

浏览器实际上会渲染元素之间的空白。这就是为什么如果你的容器是宽度：100％而你的孩子宽度：25％和宽度：75％，它会包裹到下一行。如果删除父级和子级之间HTML中的空格，则它非常适合。
如果你不能删除这个空格，你可能需要使用float和＆＃34; clearfix＆＃34;黑客攻击。但由于我可以控制空白，我只会这样实现。
您不需要图像周围的包装，只是为了完全居中内容。这通常可以通过CSS完成。在我的调整中，我告诉img是宽度：100％并且没有对高度或位置感到烦恼。对齐由父母决定。
垂直对齐很棘手。在这种情况下，您需要将其视为适用于父母的所有兄弟姐妹。我告诉奖金左边和奖金右边两个都在中间垂直对齐，这意味着较高的一个将为较短的一个提供指导。只给予left-align：middle到left-left将默认为vertical-align：top为bonus-right，这意味着奖励左中间将与奖金右上方垂直对齐。棘手的棘手。

＆＃13;

var inputString = "sum(a) / nullif(sum(b)::numeric, 0)"
var strToReplace = inputString.match(/sum\([\w]\)/g); /*Find all of type sum()*/
/*Convert get the variable to be replaced for sum(some word)*/
var varToReplace = strToReplace.map(function(item){  
    var x = item.replace(/sum\(/,''); x = x.replace(/\)/,'');return x;  })
/*Replace the string*/
strToReplace.forEach(function(item,index){
  var re = new RegExp(escapeRegExp(item));
  inputString = inputString.replace(re,varToReplace[index]);
})

function escapeRegExp(str) {
  return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
}

＆＃13;

#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%;
}

＆＃13;

Answer 2

在奖金左侧和奖励右侧添加垂直对齐将解决此问题

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

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

Answer 3

添加垂直对齐：顶部到＃bonus-right将解决您的问题

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

试试这个

将img对齐显示中心：内联块元素

3 个答案: