Выравнивание содержимого по центру

ar00 · August 4, 2012

Как выровнять содержимое сайта по центру, то есть сайт должен быть в полный экран, при изменении размеров окна браузера не должно появляться полос прокрутки, а содержимое "уходило" за окно браузера в одинаковых пропорциях.

Пример:

1

2

3

4

5

<body style="width: 100%; height: 100%">
    <section style="width: 100%; height: 100%">

    </section>
</body>

Пусть окно браузера имеет ширину/высоту 100%, при уменьшении его ширины/высоты на 10% тег <section> и его содержимое должно "уходить" влево/вверх на 5% и вправо/вниз на 5%.

Яркий пример реализации - http://www.blacknegative.com

Нечто похожее есть у Лебедева, но его способ не работает при задании элементу width и height 100% - http://www.artlebedev.ru/tools/techn.../align-center/

Помогите найти решение. Должен быть валидный CSS и HTML без использования JavaScript.

wildhind · August 4, 2012

Яркий пример реализации - http://www.blacknegative.com

без использования JavaScript.

ну а чо!?

для сборника анекдотов самое оно

ar00 · August 4, 2012

Яркий пример реализации - http://www.blacknegative.com
без использования JavaScript.
ну а чо!?
для сборника анекдотов самое оно

С моей точки зрения этот эффект можно сделать только с помощью CSS.

Возьмём пример попроще - http://42studio.ru/ верхняя картинка так же центрируется по центру и её края уходят за окно браузера. Вот только display у неё inline-block.

А нужно сделать для display:block

wildhind · August 4, 2012

так а какие проблемы картинку сделать фоном по центру?

ar00 · August 4, 2012

так а какие проблемы картинку сделать фоном по центру?

Картинку нельзя делать фоном по центру потому что в связи с особенностями моего проекта нельзя делать фоном.

Jackky · August 4, 2012

так а какие проблемы картинку сделать фоном по центру?
Картинку нельзя делать фоном по центру потому что в связи с особенностями моего проекта нельзя делать фоном.

Звучит как бред. Тогда только position: absolute; подойдет в качестве решения.

Вот, у меня была подобная задача

Edited August 4, 2012 by Jackky

wildhind · August 4, 2012

Jackky, косячок-с детектед.

если окошко сжать уже 1061 пикселя, а потом прокрутить вправо, то голова справа обрезается некрасиво и из-под неё фон вылазит непотребно.

надо указать #header { min-width: 1061px; }

ar00 · August 4, 2012

Нашёл более-менее приемлемое решение для моего случая. Может поможет кому:

#photo-wrap {
	position:fixed; 
	top:-50%; 
	left:-50%; 
	width:200%; 
	height:200%;
	min-width: 400px !important;
}

#photo-wrap > #photo {
	position:absolute; 
	top:0;
	left:0; 
	right:0; 
	bottom:0; 
	margin:auto; 
	max-width:80%;
	max-height:80%;
}

Jackky · August 4, 2012

Так задача все-таки какая была изначально?

Разместить блок ровно по центру экрана по высоте и ширине или сделать шапку-картинку, края которой залезали бы за границы экрана при ресайзе??

ar00 · August 6, 2012

Так задача все-таки какая была изначально?
Разместить блок ровно по центру экрана по высоте и ширине или сделать шапку-картинку, края которой залезали бы за границы экрана при ресайзе??

Изначально стояла задача сделать блок на весь экран, который бы залезал при ресайзе за границы экрана, в не зависимости от того что находится в этом блоке (текст/картинка/другие блоки).

Sign In

Выравнивание содержимого по центру

Question

ar00

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

wildhind

Link to comment

Share on other sites

ar00

Link to comment

Share on other sites

wildhind

Link to comment

Share on other sites

ar00

Link to comment

Share on other sites

Jackky

Link to comment

Share on other sites

wildhind

Link to comment

Share on other sites

ar00

Link to comment

Share on other sites

Jackky

Link to comment

Share on other sites

ar00

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information