Как сверстать и отцентрировать?
вот такое, сижу, туплю
общий контейнер по всему сайту 1222пикс
вот этому блоку задаю
padding-left: calc((100% - 1222px)/2);
слева текстовый блок, справа изображение
которое будет идти от цетра к правому краю за пределы
так вот пролблема теперь как сделать центр?
если я в контейнере ставлю 2 блока, даю им ширину по 50%, то это не центр страницы уже , а центр контейнера
вот что получается
какие размеры задать левому и правому блоку, дабы между ними был центр - уентр страницы?
надеюсь понятно
Дополнительно:
Гуглить статьи по "css контент по центру, фон по ширине".
А так, банальная математика
спасибо, что помогли
"css контент по центру, фон по ширине"
сами то гуглили по такому запросу? это вообще не с той оперы
мне не контен по центру нужен, а найти центр в блоке, который с лева имеет отступы а справа не имеет
Ответы:
Можно контейнеру задать display: flex, внутренним блокам — flex: 1, а картинку как background поставить и задать ей нужное положение.
Набросал пример: https://codepen.io/romant094/pen/eYxvqeQ
Можно сделать и с помощью одного блока, в котором будет находиться фон, но им сложнее манипулировать, как мне кажется.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для вертикального и горизонтального центрирования содержимого блока на веб-странице можно использовать различные способы. Один из наиболее распространенных способов - использование flexbox.
Для центрирования содержимого по горизонтали и по вертикали можно создать обертку вокруг элемента, который нужно отцентрировать, и применить к этой обертке следующие стили:
.wrapper { display: flex; justify-content: center; /* центрирование по горизонтали */ align-items: center; /* центрирование по вертикали */ height: 100vh; /* высота равная высоте окна браузера */ }
Затем внутри этой обертки разместите элемент, который нужно отцентрировать:
<div class="wrapper"> <div class="content"> <!-- Ваше содержимое здесь --> </div> </div><div class="wrapper"> <div class="content"> <!-- Ваше содержимое здесь --> </div> </div>
Если вы хотите центрировать содержимое по горизонтали без центрирования по вертикали, то можно использовать следующий код:
.wrapper { display: flex; justify-content: center; /* центрирование по горизонтали */ }
Используя flexbox, вы сможете легко и гибко центрировать содержимое на вашей веб-странице. Не забывайте также учитывать совместимость с различными браузерами при использовании этого метода.