Jump to content

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

a!max
a!max
in HTML, CSS, XML

Featured Replies

Posted
comment_128348

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

 

  • Цитата
    comment_128373
    7 часов назад, maxaent сказал:

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

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

  • Цитата
    comment_128380

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

  • Цитата
    comment_128381

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

  • Цитата
    • Author
    comment_128386

     

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

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

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

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

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

     

  • Цитата
    comment_128389 
    margin: 0 auto;

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

  • Цитата
    • Author
    comment_128390
    4 минуты назад, Respected сказал: 
    
margin: 0 auto;

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

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

  • Цитата
    • Author
    comment_128393

     

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

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

     

    4 минуты назад, WOLF сказал: 
    
body {
    margin: 0;
}

     

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

  • Цитата
    comment_128411

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

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

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

    #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

     

  • Цитата
    comment_128412

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

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

    Desktop 05.13.2017 - 00.39.43.01.png

    Так же можно через обычный отступ вокруг, просто убираем 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.

    Guest
    Ответить в этой теме...
    Go to topic listing

    Последние посетители 0

    • No registered users viewing this page.