父母继承自孩子

Question

我的div.cf包含img和div.p。

我想div.cf img的高度（尊重边距和填充），想要在div.p的左中间设置div.cf。

当我把

div.p {height: 100%; vertical-align: middle;}

当我只想制作div.cf的100％时，它会假设整个页面打开div.cf。

我知道为什么会发生这种情况，div.cf的高度是自动的，我想知道的是div.cf的高度是否取决于img。

这就是http://fiddle.jshell.net/freakhealer/1tjcooq9/

的方式

我没有把height:100%和vertical-align:middle放在小提琴中。

它目前是这样的

我试试height: 100%

最后这是我想要的（它的油漆工作）

Answer 1

您可以尝试使用CSS表格，如下所示。

CSS表向后兼容旧浏览器。

在父块上，设置display: table和width: 100%，然后在子display: table-cell元素上设置p。

如果将图像包装在p标记中，则可以更好地控制布局。

.wrapper {
  border: 1px dotted blue;
  width: 100%;
  display: table;
}
.wrapper p {
  display: table-cell;
  vertical-align: middle;
  border: 1px dashed blue;
  width: 100%; /* forces table-cell to have a shrink-to-fit with on the image */
}
.wrapper img {
  display: block; /* Removes whitespace below baseline of an inline image */
}

<div class="wrapper">
  <p>Some text to the left of the image.</p>
  <p><img src="http://placehold.it/200x200"></p>
</div>

Answer 2

愿这对你有所帮助。你调整窗口大小，你会发现“div.cf”的内部“.cf img”高度。转到此链接并检查。 http://jsfiddle.net/amitv1093/Ld7n56rq/

    div.cf
{
  background:red;
  padding:5px;
  position:relative;

}

.cf img
{
  width:100%;
}
.cf p
{
  position:absolute; 
  color:#fff;
  z-index:99;
  font-size:100%;
  top:50%;
  margin:-9px 0px;

}