父母从孩子继承

Question

我有一个div.cf，其中包含一个img 和一个div.p。

我想让div.cf 成为img 的高度（考虑边距和填充），想将div.p 设置在div.cf 的左侧中间。

当我放

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

它假设整个页面，打开div.cf，而我只想制作div.cf 的100%。

我知道为什么会这样，div.cf 的高度是自动的，我想知道是否可以使div.cf 的高度取决于img。

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

我没有把height:100% 也没有放在vertical-align:middle 因为它不会影响小提琴。

目前是这样的

我试试height: 100%

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

Answer 1

希望这会对您有所帮助。您确实调整了窗口大小，您会发现“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;

}

Answer 2

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

CSS 表格向后兼容旧版浏览器。

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

如果您将图像包装在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>