Jump to content

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

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

Featured Replies

Posted

Здравствуйте. Делаю тут "домашнюю работу" и не могу понять, почему #container в котором находится всё не выравнивается по центру margin: auto;
html

Показать контент

css

Показать контент

 

  • Цитата

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

  • Цитата
    • Author

     

      On 12.05.2017 at 17:02, Respected said:

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

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

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

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

     

  • Цитата
    • Author
      On 12.05.2017 at 17:32, Respected said: 
    
margin: 0 auto;

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

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

  • Цитата
    • Author

     

      On 12.05.2017 at 17:40, Respected said:

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

     

      On 12.05.2017 at 17:43, WOLF said: 
    
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;
}
    Показать контент

     

  • Цитата

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

    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.