выравнивание по вертикали ресайз окна или меньшее разрешение

shark_255 · 18 Янв 2013

Есть контент, под который выделено ровно 1024х768.
Задача отцентрировать по вертикали и горизонтали.
Гугление дало такое решение:

PHP:

#content {	
    width: 1024px;
	height: 768px;
    background-image:url('back.png');
    position:absolute;
	left:50%;
	top:50%;
	margin-top:-384px;
	margin-left:-512px;
}

Но! при меньшем разрешении (по высоте) или ресайзу окна браузера, содержимое залезает за верхнюю границу окна - без права использовать полосу прокрутки http://clip2net.com/s/2IXFu

как это можно вылечить?

shark_255 · 23 Янв 2013

в общем пока реализовал так:

PHP:

$(document).ready(function () {
    if ($(window).height()<760)
    {
        $("div#content").attr('id','content_small_height');
    }
    $(window).resize(function() {
        if ($(window).height()<760)
        {
            $("div#content").attr('id','content_small_height');
        }
        else
            $("div#content_small_height").attr('id','content');
    });
});

и css:

PHP:

#content {  
    width: 1024px;
    height: 768px;
    background-image:url('back.png');
    position:absolute;
    left:50%; 
    top:50%;
    margin-top:-384px;
    margin-left:-512px;
}
 
#content_small_height {
    margin: 0 auto;
    width: 1024px;
    height: 768px;
    background-image:url('back.png');
    position: relative;
}

WMix · 25 Янв 2013

PHP:

<html>
	<head>
		<style type="text/css">
			html, body {
				margin:0; padding:0;
				height:100%;
			}
		</style>
	</head>
	<body>
		<div style="height:100%; width:800px; margin:auto; display:table;">
			<div style="display:table-cell; vertical-align:middle;">
				<div style="background-color:#00f; height:600px;">Здравствуй центр</div>
			</div>
		</div>
	</body>
</html>

решение 800x600

выравнивание по вертикали ресайз окна или меньшее разрешение

shark_255

Новичок

shark_255

Новичок

WMix

герр M:)ller