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>

希望这有效，第一次制作我自己的。我让它们用不同的颜色来尝试突出不同的div。

问题是，＃image是，会有一个图像，而不是div。带有文本的兄弟div，由于窗口宽度的高度不同，它可以比图像更高或更短。当它更高时，我需要图像相对于文本垂直居中，当文本较小时，我需要文本相对于图像垂直居中。

通过我的搜索，我看到了一些解决方案，使用高度为100％的辅助元素来相对于它的中心元素，虽然我发现当我尝试它时，它使辅助元素100％的窗口高度为父元素的高度可变，或者我做错了什么？

我也看到有一个使用表的选项，但我不确定是否/如何工作，因为我计划使用一些@media将图像和文本从内嵌块更改为块顶部如果你理解我的意思，那么对于较小的屏幕，彼此。

为长期问题道歉，如果我的解释稍微偏离。

非常感谢您的任何帮助

Answer 1

由于#imageBox和#textContainer都是内联块元素，因此可以使用

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: