Posted 12 мая, 20178 yr Здравствуйте. Делаю тут "домашнюю работу" и не могу понять, почему #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; }
12 мая, 20178 yr 7 часов назад, maxaent сказал: , почему #container в котором находится всё не выравнивается по центру margin: auto; Так а чего тебе надо выровнять? container или то что в нем?
12 мая, 20178 yr Есть 2 основных способа выравнивания по центру (их больше, но еще раз, основыных 2). Родителю text-align: center? потомку или margin: 0 auto или display: inline-block
12 мая, 20178 yr Интересно, а как он должен выровняться, если он во всю ширину body? Нужно же как-то понять, что он выровнялся, для этого хотя бы установить ширину, например width:90%;
12 мая, 20178 yr Author 11 минут назад, Respected сказал: Интересно, а как он должен выровняться, если он во всю ширину body? Нужно же как-то понять, что он выровнялся, для этого хотя бы установить ширину, например width:90%; Все верно раньше стоял размер в px и все норм было, но я делаю резину (в %), а в процентах он как-то некорректно выравнивает, а именно при 100% ничего не происходит, при меньшем - уменьшает сайт (приближает его к центру, сужая) т.е. #container { margin: 0 auto; width: 100% или 70%; } сужается к центру, но не вравнивает весь сайт по центру
12 мая, 20178 yr margin: 0 auto; Этим не выровнять весь контент сайта по центру. Для этого используется text-align.
12 мая, 20178 yr Author 4 минуты назад, Respected сказал: margin: 0 auto; Этим не выровнять весь контент сайта по центру. Для этого используется text-align. мне не нужно текст выравнивать(уже проверил) Весь сайт - это блок #container, но он сейчас слева, а должен быть по центру.
12 мая, 20178 yr Author 6 минут назад, Respected сказал: Чтобы выровнять объект по центру, нужно задать ему ширину 4 минуты назад, WOLF сказал: body { margin: 0; } Сайт как был слева так и остался
12 мая, 20178 yr Как можно выровнять блок по центру, если он занимает всю ширину страницы? Мерджином выравнивается твой контейнер, а не его содержимое. Еще какое то извращением с заданием ширины шапки и подгоном нижних блоком под эту ширину. #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; } Спойлер
12 мая, 20178 yr Не знаю что там по сложности его впихнуть по центру. Достаточно задать ему ширину, и все стает как надо width: 100%; margin: auto; margin-left: 20%; / Так же можно через обычный отступ вокруг, просто убираем top остальные через %. Не знаю насколько точно будет, но на глаз приемлемо width: 100%; margin:0 18%;
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.