Question

我在div内有一个带有message课程的文字，我希望将div移到与父{4}}相对的div垂直中心}}

请参考JsFiddle - https://jsfiddle.net/1rbhuwfs/

每当我尝试设置banner时，它会无限期地超越父margin-bottom，我不明白为什么。父div上有div。

我不希望代码中包含任何display: block。

提前致谢。

Answer 1

检查以下代码段，我已添加

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

已删除margin-bottom: 40px;表单.message。

.banner {
  height: 100px;
  background-color:#4d1242;
  margin: 0 1px;
  display: block;
}

.banner > div {
  vertical-align:middle;
}

.img-1-holder {
  display: inline-block;
  margin-left: 15px;
}

.img1 {
  height: 70px;
  margin-bottom: 15px;
}

.img-2-holder {
  display: inline-block;
}

.img2 {
  height: 100px;
}

.message {
  display: inline-block;
}

<div class="banner">
  <div class="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="message">
    Some random text here
  </div>
  <div class="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>

Answer 2

检查jsfiddle，将父级置于display:table，将子级置于display: table-cell and vertical-align: middle。

https://jsfiddle.net/ggq39acr/

Answer 3

您也可以参考。 https://www.w3.org/Style/Examples/007/center.en.html

此链接中的解决方案建议一般工作！：D

Answer 4

在没有position: absolute或使用表格的情况下垂直居中的一种方法 - 并且尊重图像和文本div上的边距底部 - 是使用flexbox：

添加/更改此内容：

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

https://jsfiddle.net/5496yk1k/

Answer 5

您可以使用flexbox fiddle

.banner {
 height: 100px;
 background-color:#4d1242;
 margin: 0 1px;
 display: flex;
 justify-content: center;
 align-items: center;
}

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

上的边距

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

Answer 6

您可以尝试包含一个公共类，假设img-inline具有内联css属性，并在您的类中管理其他css属性.img-1-holder，.img-2-holder和.message

以下是您的示例代码。你可以在你的jsfiddle中试试。对不起，我不是在这里发布小提琴链接。

HTML CODE

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

CSS代码：

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

希望这会有所帮助：）

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

6 个答案: