当父母的身高是动态时，孩子div为100％ HTML / CSS

Question

我希望图像在文本旁边居中。文本的数量在每个框中都不同，所以我无法设置高度。我研究的人主要使用两种垂直居中方式。使用线高我不能使用，因为我没有固定的高度。第二个是使用我不能使用的绝对定位，因为左边的图像里面将覆盖文本。如果我将填充设置为文本，当图像是不存在它看起来不会很好。

我能想到的最好的方法是使用jQuery来获取和设置容器高度，然后根据高度设置边距。

<div class="container">
        <div class="image_holder">
            <img src="http://blog.oxforddictionaries.com/wpcms/wp-content/uploads/cat-160x160.jpg" alt="cat" />
        </div>

        <p>text</p>
    </div>

    <style type="text/css">
        .container {
            width:600px;
            overflow:hidden; }
        .image_holder {
            width:100px;
            height:100%;
            float:left;
            background:#eaf0ff; }
        p {
            width:500px;
            float:left; }
    </style>

    <script>

        $('.container').css('height', $('.container').height() );

        $('.image_holder').css('margin-top', ( $('.container').height() - $('.image_holder img').height() ) / 2 );

    </script>

有没有办法用纯CSS干净地完成它？

Answer 1

我想出的最佳解决方案是将图片绝对定位在框内，如果框中没有图像，则使用javascript删除填充。