0

Нужно, расположить блок по центру (bootstrap4) как это показано в макете. Не понимаю как это сделать, уже час с этим мучаюсь. как сделано у меня: моё

как должно быть по макету: макет

* {
  margin: 0;
  color: #ffffff; }

button,
button:active,
button:focus {
  outline: none; }

.home {
  height: 670px;
  background-size: cover;
  background-image: url("../img/first-bg1.png");
  background-repeat: no-repeat;
  padding-top: 10px; }
  .home .nav__links a {
    color: #ffffff;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 12px;
    padding-left: 20px; }
  .home p {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 20px; }
  .home hr {
    width: 50px;
    margin: 25px auto;
    color: #00e0d0; }
  .home h2 {
    text-transform: capitalize;
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    text-align: center; }
  .home .nav__links a:hover {
    color: #00e0d0; }
  .home .learnMore {
    display: block;
    color: #00e0d0;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    padding: 10px 5px;
    width: 120px;
    border-radius: 3px;
    border: 1px solid #00e0d0;
    background-color: rgba(0, 0, 0, 0);
    -webkit-box-shadow: 0 0 0 0;
            box-shadow: 0 0 0 0;
    margin: 52px auto 0; }
<!DOCTYPE html>
<html lang="ru-RU">
  <head>
    <link rel="stylesheet" href="css/styles.css">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900&amp;display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&amp;display=swap" rel="stylesheet">
    <meta charset="utf-8">
    <title>Главная страница</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
  </head>
  <body>
    <div class="home">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-md-5"><img class="logo" src="./img/logo.png" alt="logo"></div>
          <div class="col-md">
            <nav class="nav__links"><a href="">home </a><a href="">about </a><a href="">expertise </a><a href="">teams </a><a href="">works </a><a href="">people say </a><a href="">contact </a></nav>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-md-1"></div>
          <div class="col-md-10">    
            <h2>we are awesome creative agency   </h2>
            <hr>
            <p>
              This is Photoshop`s version of Lorem Ipsum. Proin gravida nibh vel velit autctor aliquet.
              Aenean sollicitudin, lorem quis bibendum auctor nisi elit consequat ipsum, nec sagittis sem nibh id elit.
              Duis sed odio amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit.
            </p>
            <button class="learnMore" type="button">LEARN MORE</button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

4
  • попробуйте прописать justify-content-center к row
    – Leks
    24 мая 2019 в 14:01
  • @Leks пробовал, ничего не изменилось
    – Bender
    24 мая 2019 в 14:04
  • попробуйте двигать margin/padding 24 мая 2019 в 14:30
  • @ДмитрийСухоцкий это как самый последний вариант к которому не хотелось бы прибегать, нельзя как-то при помощи бутстрапа указать, что нужно разместить по середине?
    – Bender
    24 мая 2019 в 14:31

1 ответ 1

0
  1. Удалите <div class="col-md-1"></div>
  2. Добавьте к row классы
    • justify-content-center - выравнивание по главной оси(горизонтали)
    • align-items-center - выравнивание по вертикали
    • h-100 - высота 100%
  3. Добавить container(home__content) высоту в 100% (отнимаем высоту шапки).

/*---NEW----*/
.home {
  background-color: #eaeaea;
}
.home__content {
  height: calc(100% - 26px); //26px - Высота шапки
}

/*-------*/

* {
  margin: 0;
  color: #ffffff;
}

button,
button:active,
button:focus {
  outline: none;
}

.home {
  height: 670px;
  background-size: cover;
  background-image: url("../img/first-bg1.png");
  background-repeat: no-repeat;
  padding-top: 10px;
}

.home .nav__links a {
  color: #ffffff;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
  padding-left: 20px;
}

.home p {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 20px;
}

.home hr {
  width: 50px;
  margin: 25px auto;
  color: #00e0d0;
}

.home h2 {
  text-transform: capitalize;
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  text-align: center;
}

.home .nav__links a:hover {
  color: #00e0d0;
}

.home .learnMore {
  display: block;
  color: #00e0d0;
  font-family: 'Roboto', sans-serif;
  font-size: 13px;
  padding: 10px 5px;
  width: 120px;
  border-radius: 3px;
  border: 1px solid #00e0d0;
  background-color: rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 0 0 0;
  box-shadow: 0 0 0 0;
  margin: 52px auto 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="home">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-5"><img class="logo" src="./img/logo.png" alt="logo"></div>
      <div class="col-md">
        <nav class="nav__links"><a href="">home </a><a href="">about </a><a href="">expertise </a><a href="">teams </a><a href="">works </a><a href="">people say </a><a href="">contact </a></nav>
      </div>
    </div>
  </div>
  <div class="container home__content">
    <div class="row justify-content-center align-items-center h-100">
      <div class="col-md-10">
        <h2>we are awesome creative agency </h2>
        <hr>
        <p>
          This is Photoshop`s version of Lorem Ipsum. Proin gravida nibh vel velit autctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio amet nibh vulputate cursus a sit amet mauris.
          Morbi accumsan ipsum velit.
        </p>
        <button class="learnMore" type="button">LEARN MORE</button>
      </div>
    </div>
  </div>
</div>

Ваш ответ

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

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