4

Проблема состоит в том, что я не понимаю, каким образом делается подобный враппер и устанавливается в середине контейнера-родителя.

Каким образом элементы располагаются фиксированно в центре? Я так понимаю, это внутренний div, который и фиксирует весь контент - но могу и ошибаться.

введите сюда описание изображения

Вот моя попытка:

CSS:

@font-face {

    font-family: BebasNeue;
    src: 
        url("BebasNeue Bold.ttf"),
        url("BebasNeue Book.ttf"),
        url("BebasNeue Light.ttf"),
        url("BebasNeue Thin.ttf"),
        url("BebasNeue Regular.ttf");

}

@font-face {

    font-family: logo;
    src:
        url("../fonts/logo_lobster_1_4.otf");

}

main {

    max-width: 1280px;

}

.wrapper {

    max-width: 1024px;


}

#logo {
    font-size: 49px;
    font-family: logo, BebasNeue, serif;
    color: #3cc3b5;

}

HTML:

<!DOCTYPE html>
<html lang="ru-RU">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
  <link rel="stylesheet" type="text/css" href="./css/style.css" >
</head>

<body>

 <main> 
  <div class = "wrapper">
  <header>

     <span id = "logo">Aditii</span>

  </header>
        span some text

    </div>

    </main>



    <footer> </footer>


</body>
</html>

1 ответ 1

3

Раньше делали так:

.wrapper {
  background: cyan;
}
.container {
  width: 100%;
  max-width: 80%;
  margin: 0 auto;
  background: rgba(0, 0, 0, .3);
}
<div class="wrapper">
  <div class="container">
    Content
  </div>
</div>

Контейнер центрируется за счет margin: 0 auto;, при этом не растягивается больше max-width.

Сейчас нам доступны флексбоксы:

.wrapper {
  background: cyan;
  display: flex;
  justify-content: center;
}
.container {
  flex-grow: 1;
  max-width: 80%;
  background: rgba(0, 0, 0, .3);
}
<div class="wrapper">
  <div class="container">
    Content
  </div>
</div>

Здесь flex-grow: 1; у конейтнера нужен, чтобы он растягивался на максимально доступную ему ширину.

10
  • но оно не по центру
    – Silento
    16 мая 2017 в 14:40
  • Вы смотрите не здесь, а, например, здесь: codepen.io/shugich/pen/eWjRqL На stackoverflow ширина конейнера слишком маленькая, чтобы увидеть. 16 мая 2017 в 14:42
  • да, теперь увидел. Допишите пожалуйста, для чего margin 0 auto; используется. Просто в Вашем примере я не совсем понимаю, как 1280 становится оберткой, внутри которого 1024 пикселей контейнер. Внутренний по какой-то причине имеет 1280 пикселей, зачем нужен wrapper в таком случае?
    – Silento
    16 мая 2017 в 14:43
  • А он как раз центрирует контейнер. Слева и справа отступ высчитывается автоматически и он одинаковый. 16 мая 2017 в 14:44
  • 1
    Добавил еще одно решение. 16 мая 2017 в 14:47

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.