Форум

Pumych · #1 (**permalink**) 12.03.2011, 01:09

Почему не выравнивается по вертикали?

<div id="big-sample">
    <img src="barsuk.jpg">
 </div>

Код:

            #big-sample {
                width: 350px;
                height: 350px;
                border: 1px solid gray;
            }
            
            #big-sample img {
                max-height: 300px;
                max-width: 300px;
                display: inline-block;
                vertical-align: middle;
            }

Aetae · #2 (**permalink**) 12.03.2011, 01:28

А с чего бы ей?

Pumych · #3 (**permalink**) 12.03.2011, 01:31

А как?

poorking · #4 (**permalink**) 12.03.2011, 06:39

можно задать родителю картинки line-height равное height родителя, как один из вариантов, и кстати img если не ошибаюсь и так является inline-block элементом, не зачем в его стиле это повторять.

<!DOCTYPE html>
<style type = "text/css">
	div {
		text-align:center;
		width: 500px;
		height: 150px;
		outline:1px solid red;
		line-height: 150px;
	}
	div img{
		vertical-align:middle;
	}
</style>
<div>
    <img src="http://javascript.ru/forum/images/ca_serenity/misc/logo.gif" />
</div>

Pumych · #5 (**permalink**) 12.03.2011, 16:53

poorking
Спасибо, это первый вариант из многих других которые были мной найдены и который работает во всех браузерах. Вы мне очень помогли.
Вот подогнал под свои нужды:

Код:

    div {
        text-align:center;
        width: 350px;
        height: 350px;
        outline:1px solid red;
        line-height: 350px;
    }
    div img{
        vertical-align:middle;
        max-width: 300px;
        max-height: 300px;
    }

Форум

Справочник

Discord чат

Курсы javascript