Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Как выровнять блок по центру (https://javascript.ru/forum/xhtml-html-css/55383-kak-vyrovnyat-blok-po-centru.html)

user_name 25.04.2015 14:04

Как выровнять блок по центру
 
Добрый день,
Есть блок шириной 100% от минимальной ширины сайта 960px, в этом блоке еще два блока шириной по 400px, float у блоков по левому краю. При ширине окна браузера меньше общей ширины этих двух блоков правый блок съезжает вниз. Все так и должно быть, но как мне при этом выравнять эти два блока по центру?

user_name 25.04.2015 14:41

Появилась идея сделать с помощью js, проверять ширину окна браузера и если меньше определенной величины то просто менять стилизацию этим блокам.

igormog 25.04.2015 15:11

Цитата:

Все так и должно быть, но как мне при этом выравнять эти два блока по центру?
Можно задать ширину блоков в %, например по 45% каждый блок

igormog 25.04.2015 15:12

Цитата:

Сообщение от user_name (Сообщение 368205)
Появилась идея сделать с помощью js, проверять ширину окна браузера и если меньше определенной величины то просто менять стилизацию этим блокам.

Правильнее для этого использовать Медиа-запросы в CSS, с помощью которых можно назначить ширину блоков при разных разрешениях.

user_name 25.04.2015 15:45

это значит от нуля и до 800px ? @media screen and (max-device-width: 800px) И если условие выполняется то задаю новые стили. А если монитор больше 800px то условие не выполняется. Я правильно понимаю?

igormog 25.04.2015 16:27

Цитата:

Сообщение от user_name (Сообщение 368214)
это значит от нуля и до 800px ? @media screen and (max-device-width: 800px)

Да, верно, при разрешении менее 800px

Вот еще приведу пример стилей под разные разрешения:

/* Если больше 920 */
@media screen and (min-width: 920px) {
	.colum {
		width: 400px;
	}
}

/* От 641 до 919 */
@media screen and (min-width: 641px) and (max-width: 919px) {
	.colum {
		width: 45%;
	}
}

/* Если меньше 640 */
@media screen and (min-width: 0px) and (max-width: 640px) {
	.colum {
		width: 300px;
	}
}


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