Html 保证金底部不起作用，超出父div

我在带有class

消息的
div
中有一个文本，我想将
div
相对于带有class
横幅的父
div
移动到垂直中心

请参阅此处的JSFIDLE-

每当我试图设置
边距底部
，它就会无限期地超过父
div
，我不明白为什么。父级
div
上有
display:block

我不喜欢在我的代码中有任何
位置：绝对

提前谢谢。
检查下面的代码片段，我已经添加了

.banner > div {
  vertical-align:middle;
}

并删除
页边距底部：40px表单
。消息


.banner{
高度：100px；
背景色：#4d1242；
利润率：0.1px；
显示：块；
}
.banner>div{
垂直对齐：中间对齐；
}
.img-1-holder{
显示：内联块；
左边距：15px；
}
.img1{
高度：70像素；
边缘底部：15px；
}
.img-2-holder{
显示：内联块；
}
.img2{
高度：100px；
}
.留言{
显示：内联块；
}

这里有一些随机文本
一种不使用
位置的垂直居中方法：绝对法
或使用表格-并尊重图像和文本div上的页边距底部-是使用flexbox：

添加/更改以下内容：

.banner {
  display: flex;
  align-items: center;
}

检查jsfiddle，将父对象放到
显示：表格中，将子对象放到
显示：表格单元格中，并垂直对齐：中间

您可以使用flexbox

在这种情况下，您可以删除页边距

.img1 {
  height: 70px;
}   
.message {
  display: inline-block;
}

你也可以参考这个

此链接中建议的解决方案通常有效！：D
您可以尝试使用内联css属性包含一个公共类，并管理类中的其他css属性。img-1-holder、.img-2-holder和.message

下面是一个示例代码。您可以在JSFIDLE中尝试它。对不起，我没有张贴小提琴链接在这里

HTML代码

<div class="banner">
  <div class="img-inline img-1-holder">
    <img class="img1" src="http://free-smiley-faces.de/images/free-animated-angry-smiley-animiert-wuetend_02_70x70.gif">
  </div>
  <div class="img-inline message">
    Some random text here
  </div>
  <div class="img-inline img-2-holder">
    <img class="img2" src="http://www.free-smiley-faces.de/Smiley-Faces/www.free-smiley-faces.de_smiley-face_03_100x100.gif">
  </div>
</div>

希望这有帮助：）

<div class="banner">
  <div class="img-inline img-1-holder">
    <img class="img1" src="http://free-smiley-faces.de/images/free-animated-angry-smiley-animiert-wuetend_02_70x70.gif">
  </div>
  <div class="img-inline message">
    Some random text here
  </div>
  <div class="img-inline img-2-holder">
    <img class="img2" src="http://www.free-smiley-faces.de/Smiley-Faces/www.free-smiley-faces.de_smiley-face_03_100x100.gif">
  </div>
</div>

.banner {
  height: 100px;
  background-color:#4d1242;
  margin: 0 1px;
  display: block;
}

.img-1-holder {
  margin-left: 15px;
}

.img1 {
  height: 70px;
  margin-bottom: 15px;
}

.img-2-holder {
  margin-left: 15px;
}

.img2 {
  height: 100px;
}

.img-inline {
  display: inline-block;
  vertical-align: middle;
}