15/27 Не работает центровщик! Что делать?

Курсы §15. Сетки
1

Дорый день!
Помогите, кто-нибудь, не могу выронить блоки по центру. Центровщик не работает, не могу понять в чем причина.

<body>
    <div class="fon">
    <div class="header">
        <div class="layout-positioner">
        Header
        </div>
    </div>
    <div class="Menu">
        <div class="layout-positioner">
        Menu
        </div>
    </div>
    <div class="layout-column">
        <div class="layout-positioner">
        <div class="column1"> Promo 1
        </div>
        <div class="column2"> Promo 2
        </div>
        </div>
        </div>
    </div>
    <div class="layout-content">
        <div class="layout-positioner">
        <div class="column-left"> Left
        </div>
        <div class="column-main"> Main
        </div>
        <div class="column-right"> Right
        </div>
        </div>
    </div>
    <div class="footer">
        <div class="layout-positioner">
        Footer
        </div>
    </div>
</body>

СSS

/html,
body {
margin: 0;
padding: 0;
}

body {
width: 450px;
height: 335px;
font-family: “Arial”, sans-serif;
font-size: 10px;
color: white;
}

.header {
width: 350px;
min-height: 30px;
background: #c0392b;
margin-bottom: 10px;
}

.Menu {
width: 450px;
min-height: 40px;
background: #3498DB;
margin-bottom: 10px;
}
.layout-column {
margin-bottom: 10px;
}

.column1 {
width: 170px;
min-height: 60px;
background: #c0392b;
float: left;
margin-bottom: 10px;

}

.column2 {
width: 170px;
min-height: 60px;
background: #c0392b;
float: right;
}

.layout-content {
display: inline-block;
margin: 10px 10px;
}

.column-left {
display: inline-block;
width: 70px;
min-height: 100px;
background: #3498DB;
}

.column-main {
display: inline-block;
width: 200px;
min-height: 100px;
background: #3498DB;
}

.column-right {
display: inline-block;
width: 70px;
min-height: 100px;
background: #3498DB;

}

.footer {

min-height: 30px;
background: #34495e;

}

.layout-positioner::after {
content: “”;
display: table;
clear: both;
}

.layout-positioner {
width: 400px;
margin: 0 auto;
border: 2px dashed black;
}

.fon {
background: #34495e;
}

/*
Используемые цвета:
#34495e – мокрый асфальт
#c0392b – красный
#3498DB – синий
*/

2

Добрый вечер! Насколько Я вижу, у Вас в самом первом куске .layout-positioner идёт ПОСЛЕ .header, таким образом, Вы пытаетесь сдвинуть само слово, но не верхний красный блок. Если поменять порядок, центровщик сработает. Далее, у Вас неправильно подобраны размеры центровщика и содержимого: посмотрите, в .fon он реально работает! Однако, поскольку содержимое гораздо меньше ширины центровщика, оно, естественно, не выравнивается. И ещё мне почему-то хочется promo2 сделать тоже левый float, а не правый. :slight_smile: Вот пока такие мысли.

3

И почему в CSS у Вас в самой первой строке стоит слэш? Он отодвигает всю конструкцию от краёв мини-браузера… И ещё, задайте .fon какие-нибудь паддинги - у Вас выпадают маргины… А причина, по которой не работает центровщик с 3-мя голубыми блоками - у Вас контейнеру (белой части), в которой находятся эти блоки, задано display: inline-block! В отличие от display: block, который по умолчанию растягивается на всю ширину родительского контейнера, inline-block облегает содержимое, а оно, само собой, меньше, чем размеры body. В итоге Вы задаёте центровщик СОДЕРЖИМОМУ белого контейнера, которому Вы не задаёте смещения, кроме небольших (по 10) внешних отступов со всех сторон. А как центровщик сможет “вырвать” содержимое из своего контейнера, чтобы центрировать его?

1 лайк