a!max Опубликовано 12 мая, 2017 Поделиться Опубликовано 12 мая, 2017 Здравствуйте. Делаю тут "домашнюю работу" и не могу понять, почему #container в котором находится всё не выравнивается по центру margin: auto;html Спойлер <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>House Max</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div id="container"> <div id="header"></div> <div id="bar"> <div id="menu"><font><b>Заказать проект</b></font></br> <font1><b>Категории проектов</b></font1> <ol> <li><a href="#"><b>Проекты таунхаусов и блокированных домов</b></a></li> <li><a href="#"><b>Проекты домов на две семьи</b></a></li> <li><a href="#"><b>Проекты узких домов</b></a></li> <li><a href="#"><b>Проекты бань</b></a></li> </ol> </div> </div> <div id="main"></div> </div> </body> </html> css Спойлер #container { margin: auto; } #header { border: 1px solid black; width: 63%; height: 193px; background: url(img/shapka_div.jpg); } #bar { float:left; border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; background: url(img/bar.jpg); background-size: cover; width: 17.3%; height: 600px; } #main { border-right: 1px solid black; border-bottom: 1px solid black; float: left; border-top: 2px; background: url(img/main.jpg); background-size: cover; width: 45.6%; height: 600px; } /* правая часть сайта bar */ #menu { padding-top: 15px; } ol { margin-left: -10px; margin-top: 2px; } font { margin-left: 20px; margin-bottom: 5px; font-size: 20px; } font1 { margin-left: 20px; font-size: 15px; } a { color: #E42900; text-decoration: none; } a:hover { color: blue; text-decoration: underline; } Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
WOLF Опубликовано 12 мая, 2017 Поделиться Опубликовано 12 мая, 2017 может нужно: margin: 0 auto; Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
a!max Опубликовано 12 мая, 2017 Автор Поделиться Опубликовано 12 мая, 2017 7 часов назад, WOLF сказал: может нужно: margin: 0 auto; не помогает Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
kgb Опубликовано 12 мая, 2017 Поделиться Опубликовано 12 мая, 2017 7 часов назад, maxaent сказал: , почему #container в котором находится всё не выравнивается по центру margin: auto; Так а чего тебе надо выровнять? container или то что в нем? Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Silence Опубликовано 12 мая, 2017 Поделиться Опубликовано 12 мая, 2017 Поставит headar перед container .... попробуйте снова Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
kgb Опубликовано 12 мая, 2017 Поделиться Опубликовано 12 мая, 2017 Есть 2 основных способа выравнивания по центру (их больше, но еще раз, основыных 2). Родителю text-align: center? потомку или margin: 0 auto или display: inline-block Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Respected Опубликовано 12 мая, 2017 Поделиться Опубликовано 12 мая, 2017 Интересно, а как он должен выровняться, если он во всю ширину body? Нужно же как-то понять, что он выровнялся, для этого хотя бы установить ширину, например width:90%; Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
a!max Опубликовано 12 мая, 2017 Автор Поделиться Опубликовано 12 мая, 2017 11 минут назад, Respected сказал: Интересно, а как он должен выровняться, если он во всю ширину body? Нужно же как-то понять, что он выровнялся, для этого хотя бы установить ширину, например width:90%; Все верно раньше стоял размер в px и все норм было, но я делаю резину (в %), а в процентах он как-то некорректно выравнивает, а именно при 100% ничего не происходит, при меньшем - уменьшает сайт (приближает его к центру, сужая) т.е. #container { margin: 0 auto; width: 100% или 70%; } сужается к центру, но не вравнивает весь сайт по центру Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Respected Опубликовано 12 мая, 2017 Поделиться Опубликовано 12 мая, 2017 margin: 0 auto; Этим не выровнять весь контент сайта по центру. Для этого используется text-align. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
a!max Опубликовано 12 мая, 2017 Автор Поделиться Опубликовано 12 мая, 2017 4 минуты назад, Respected сказал: margin: 0 auto; Этим не выровнять весь контент сайта по центру. Для этого используется text-align. мне не нужно текст выравнивать(уже проверил) Весь сайт - это блок #container, но он сейчас слева, а должен быть по центру. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Respected Опубликовано 12 мая, 2017 Поделиться Опубликовано 12 мая, 2017 Чтобы выровнять объект по центру, нужно задать ему ширину Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
WOLF Опубликовано 12 мая, 2017 Поделиться Опубликовано 12 мая, 2017 body { margin: 0; } Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
a!max Опубликовано 12 мая, 2017 Автор Поделиться Опубликовано 12 мая, 2017 6 минут назад, Respected сказал: Чтобы выровнять объект по центру, нужно задать ему ширину 4 минуты назад, WOLF сказал: body { margin: 0; } Сайт как был слева так и остался Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
jack007 Опубликовано 12 мая, 2017 Поделиться Опубликовано 12 мая, 2017 width: 100%; margin: auto; margin-left: 20%; / Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Fateswhisper Опубликовано 12 мая, 2017 Поделиться Опубликовано 12 мая, 2017 Как можно выровнять блок по центру, если он занимает всю ширину страницы? Мерджином выравнивается твой контейнер, а не его содержимое. Еще какое то извращением с заданием ширины шапки и подгоном нижних блоком под эту ширину. #container { /* margin: auto; */ margin: 0 auto; width: 63%; overflow: hidden; } #header { border: 1px solid black; /* width: 63%; */ height: 193px; background: url(img/shapka_div.jpg); } #bar { float: left; border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; background: url(img/bar.jpg); background-size: cover; /*width: 17.3%;*/ width: 35%; height: 600px; box-sizing: border-box; } #main { border-right: 1px solid black; border-bottom: 1px solid black; float: left; border-top: 2px; background: url(img/main.jpg); background-size: cover; /*width: 45.6%;*/ width: 65%; height: 600px; box-sizing: border-box; } Спойлер a!max 1 Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
jack007 Опубликовано 12 мая, 2017 Поделиться Опубликовано 12 мая, 2017 Не знаю что там по сложности его впихнуть по центру. Достаточно задать ему ширину, и все стает как надо width: 100%; margin: auto; margin-left: 20%; / Так же можно через обычный отступ вокруг, просто убираем top остальные через %. Не знаю насколько точно будет, но на глаз приемлемо width: 100%; margin:0 18%; Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
a!max Опубликовано 13 мая, 2017 Автор Поделиться Опубликовано 13 мая, 2017 @Fateswhisper, спасибо. Цитата Ссылка на комментарий Поделиться на другие сайты Поделиться
Рекомендуемые сообщения
Присоединяйтесь к обсуждению
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.