Выровнять по вертикали изображение переменного размера в div? - PullRequest
Новая
       6

Выровнять по вертикали изображение переменного размера в div?

1 голос
/ 02 августа 2011

Редактировать: Примечание для любого, кто читает это, единственная причина, по которой это не сработало для меня, в том, что я использовал DOCTYPE TRANSITIONAL. Без каких-либо изменений в HTML или CSS, переключение на DOCTYPE STRICT заставило его работать. Это верно как минимум для Chrome, FF и IE8.

Я перепробовал множество решений, предлагаемых онлайн, и ни одно из них мне не помогло. Я пытаюсь выровнять изображение по вертикали внутри div (изображение уже выровнено по горизонтали).

Изображение может быть любой ширины и любой высоты (до 70 пикселей), поэтому я не могу использовать фиксированное поле или что-то подобное.

Вот мой HTML + CSS: 

<head>
    <style type="text/css" media="all">
    #list ul {
        list-style: none;
        margin: 0px;
        padding: 0px;
    }
    #list li {
        border: 2px solid #DDD;
        margin-bottom: 3px;
        height: 110px;
    }
    #image {
        width: 75px;
        height: 110px;
        line-height: 110px;
        float: left;
    }
    #image img {
        vertical-align: middle;
        display: block;
        margin: auto;
    }
    #event {
        margin-left: 75px;
    }
    </style>
</head>

<body>
<div id='container'>
    <div id="list">
        <ul>
            <li>
                <div id='image'>
                    <img src='http://sstatic.net/stackoverflow/img/favicon.ico'/>
                </div>
                <div id='event'>
                    <h1>Text</h1>
                    <h2>More Text</h2>
                </div>
            </li>
            <li>
                <div id='image'>
                    <img src='http://sstatic.net/stackoverflow/img/favicon.ico'/>
                </div>
                <div id='event'>
                    <h1>Text</h1>
                    <h2>More Text</h2>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

Ответы [ 2 ]

4 голосов
/ 02 августа 2011

Нельзя использовать vertical-align для элемента блока.Изображение обычно является встроенным элементом, но у вас явно установлено значение display: block.Удалите это и установите line-height родительского div в высоту div.

Работает здесь: http://jsfiddle.net/YnzR9/1/

#image {
    width: 75px;
    height: 100%;
    float: left;
    line-height: 110px;
    text-align: center;
}
#image img {
    vertical-align: middle;
}
1 голос
/ 02 августа 2011

Установите "line-height" div для того же значения, что и высота div.

Обновление: если вы хотите, чтобы изображение было выровнено по центру, используйте следующее. 

#image {
    width: 75px;
    height: 110px;
    float: left;
    line-height: 110px;
    text-align:center;
}
#image img {
    vertical-align: middle;
}
...