Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Выравнивание картинки по центру (https://javascript.ru/forum/xhtml-html-css/15755-vyravnivanie-kartinki-po-centru.html)

Pumych 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 12.03.2011 01:28
А с чего бы ей?

Pumych 12.03.2011 01:31
А как?

poorking 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 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;
    }


Часовой пояс GMT +3, время: 00:45.