родительский наследовать от ребенка

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 причина его не afecting в скрипку.

его в настоящее время нравится этот

двутавровой попробовать 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; 

}