Перейти к содержанию

Почему не выравнивается по центру?


a!max

Рекомендуемые сообщения

Здравствуйте. Делаю тут "домашнюю работу" и не могу понять, почему #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;
  }

 

Ссылка на комментарий
Поделиться на другие сайты

7 часов назад, WOLF сказал:

может нужно:


margin: 0 auto;

 

не помогает

Ссылка на комментарий
Поделиться на другие сайты

7 часов назад, maxaent сказал:

, почему #container в котором находится всё не выравнивается по центру margin: auto;

Так а чего тебе надо выровнять? container или то что в нем?

Ссылка на комментарий
Поделиться на другие сайты

Поставит headar перед container .... попробуйте снова

Ссылка на комментарий
Поделиться на другие сайты

Есть 2 основных способа выравнивания по центру (их больше, но еще раз, основыных 2). Родителю text-align: center? потомку или margin: 0 auto или display: inline-block

Ссылка на комментарий
Поделиться на другие сайты

Интересно, а как он должен выровняться, если он во всю ширину body? Нужно же как-то понять, что он выровнялся, для этого хотя бы установить ширину, например width:90%;

Ссылка на комментарий
Поделиться на другие сайты

 

11 минут назад, Respected сказал:

Интересно, а как он должен выровняться, если он во всю ширину body? Нужно же как-то понять, что он выровнялся, для этого хотя бы установить ширину, например width:90%;

Все верно раньше стоял размер в px и все норм было, но я делаю резину (в %), а в процентах он как-то некорректно выравнивает, а именно при 100% ничего не происходит, при меньшем - уменьшает сайт (приближает его к центру, сужая)
т.е.

#container {
margin: 0 auto;
width: 100% или 70%;
}

сужается к центру, но не вравнивает весь сайт по центру

 

Ссылка на комментарий
Поделиться на другие сайты

margin: 0 auto;

Этим не выровнять весь контент сайта по центру. Для этого используется text-align.

Ссылка на комментарий
Поделиться на другие сайты

4 минуты назад, Respected сказал:

margin: 0 auto;

Этим не выровнять весь контент сайта по центру. Для этого используется text-align.

мне не нужно текст выравнивать(уже проверил)
Весь сайт - это блок #container, но он сейчас слева, а должен быть по центру.

Ссылка на комментарий
Поделиться на другие сайты

Чтобы выровнять объект по центру, нужно задать ему ширину

Ссылка на комментарий
Поделиться на другие сайты

 

6 минут назад, Respected сказал:

Чтобы выровнять объект по центру, нужно задать ему ширину

 

4 минуты назад, WOLF сказал:

body {
    margin: 0;
}

 

Сайт как был слева так и остался
Screenshot_1.png

Ссылка на комментарий
Поделиться на другие сайты

Как можно выровнять блок по центру, если он занимает всю ширину страницы?

Мерджином выравнивается твой контейнер, а не его содержимое.

Еще какое то извращением с заданием ширины шапки и подгоном нижних блоком под эту ширину.

#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;
}
Спойлер

1.jpg

 

Ссылка на комментарий
Поделиться на другие сайты

Не знаю что там по сложности его впихнуть по центру. Достаточно задать ему ширину, и все стает как надо
 

width: 100%; 
margin: auto; 
margin-left: 20%; /

Desktop 05.13.2017 - 00.39.43.01.png

Так же можно через обычный отступ вокруг, просто убираем top остальные через %. Не знаю насколько точно будет, но на глаз приемлемо 
 

width: 100%;
margin:0 18%;

 

Ссылка на комментарий
Поделиться на другие сайты

Присоединяйтесь к обсуждению

Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.

Гость
Ответить в этой теме...

×   Вставлено с форматированием.   Вставить как обычный текст

  Разрешено использовать не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отображать как обычную ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставлять изображения напрямую. Загружайте или вставляйте изображения по ссылке.

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...