如何在可变高度的 div 中垂直居中可变高度的 div？

Question

在涉及 CSS/HTML 网络内容时，我有点业余，但我觉得我学到了很多东西，并且感谢在所有堆栈溢出问题中提供的所有帮助。我运行遇到了一个问题，并且已经搜索了几个小时的解决方案，如果这是重复的，我深表歉意，但老实说我找不到。

基本上，我创建了一个更简单的版本来演示我的问题： http://jsfiddle.net/qoqq39ss/

.full {
  width: 100%;
  height: 100px;
  background-color: yellow;
}
.mainWide {
  width: 80%;
  margin: 0px auto;
  background-color: grey;
}
#imageBox {
  display: inline-block;
  width: 35%;
  background-color: orange;
}
#image {
  width: 80%;
  height: 190px;
  vertical-align: middle;
}
#textContainer {
  display: inline-block;
  vertical-align: middle;
  width: 65%;
  background-color: blue;
}

<div class="full">
</div>
<div class="mainWide">
  <div id="imageBox">
    <div id="image"></div>
  </div><!--
--><div id="textContainer">
  <h2>heading</h2>
  <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
  </div><!--
--></div>
<div class="full">
</div>

希望有用，我第一次自己做。我用不同的颜色来尝试突出不同的 divs.

问题是，#image 所在的位置就会有图像，而不是 div。带有文本的同级 div，由于 window 的宽度，它的高度会有所不同，它可以比图像高或短。当它更高时，我需要图像相对于文本垂直居中，当文本较小时我需要文本相对于图像垂直居中。

通过我的搜索，我看到了一些使用高度为 100% 的辅助元素来使元素相对于它居中的解决方案，但我发现当我尝试这样做时，它使辅助元素成为高度的 100% window 因为父元素的高度是可变的，或者我做错了什么？

我还看到有一个使用表格的选项，但我不确定 if/how 这是否可行，因为我正计划使用一些 @media 将图像和文本从内联块中更改如果您明白我的意思，则可以在较小的屏幕上彼此重叠。

很抱歉问题很长，如果我的解释有点不对。

非常感谢您的帮助

Answer 1

因为#imageBox和#textContainer都是行内块元素，你可以使用

#imageBox, #textContainer {
    vertical-align: middle;
}

目前您正在 #image 上使用它，但它没有任何效果，因为 #image 是一个块元素。您应该在 #imageBox 上使用它。

.full {
  width: 100%;
  height: 100px;
  background-color: yellow;
}
.mainWide {
  width: 80%;
  margin: 0px auto;
  background-color: grey;
}
#imageBox {
  display: inline-block;
  width: 35%;
  background-color: orange;
  vertical-align: middle;
}
#image {
  width: 80%;
  height: 100px;
}
#textContainer {
  display: inline-block;
  vertical-align: middle;
  width: 65%;
  background-color: blue;
}

<div class="full">
</div>
<div class="mainWide">
  <div id="imageBox">
    <div id="image"></div>
  </div><!--
--><div id="textContainer">
  <h2>heading</h2>
  <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
  </div><!--
--></div>
<div class="full">
</div>

如何在可变高度的 div 中垂直居中可变高度的 div？

How do I vertically centre a div of variable height within a div of variable height?

html

css

height

alignment