Как центрировать блок для всех разрешений экрана?

Question

[al1393]

Всем здравствуйте! Разрабатываю сайт и возникла проблема: при большой ширине экрана центральный блок уезжает влево...а также шапка растягивается по ширине экрана...в общем нужно чтобы все элементы оставались по центру страницы,какое бы не было разрешение, подскажите пожалуйста,как все это можно осуществить и можно ли с моим кодом...
Вот ссылка на сайт: http://парабола365.рф

Answer 1

[Александр]

Первый способ самый неприятный и сложный: Прописывать стили для всех разрешений, то есть

@media only screen and (min-width : 768px) {

}

и тд и тп.
Второй способ - поместить блок в еще container и задать ему ширину, позже в зависимости от разрешений менять эту ширину. Почитайте для этого о bootstrap сетке.
Третий способ - задать ширину блоку, и убрать position: absolute;, а после прописать margin: 0 auto;
Четвертый (костыль) - задать вместо div тэг p и у вышестоящего дива прописать ширину 100%, text-align: center;

Comments

[Александр]

А ваш код немного неправильный, а вообще... Он совершенно не верный. Лучше использовать сетку, я использую bootstrap (почитайте о ней обязательно!)

[al1393]

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

[Александр]

al1393, Способы помогли? А лучше сайт свой первый писать с наглядными видеороликом.

[Александр]

al1393, Кст, я с города в котором находится компания этого сайта.

[al1393]

Александр, сейчас буду пробовать) потом напишу как сработало)
вы с Оренбурга?

[Александр]

al1393, Да

[al1393]

Александр, ну я тоже)

[Александр]

al1393, Вам может помочь с сайтом?

[al1393]

Александр, спасибо, пока пытаюсь сама, через bootstrap... если что, то придется обратиться наверное)

[al1393]

Александр,теперь возникла другая проблема) с css grid)

подскажите пожалуйста, как лучше переместить надпись, которая выделена, в соседнюю колонку, как на картинке показано
Я пробовала через "grid-column", но ничего не выходит...

[Александр]

al1393, У вас, видимо прописано text-align: center

Answer 2

[Daniel Tsioma]

.block {
    display: flex; 
    justify-content: center;
}

И все, даже медиа-запросы не нужны