Центрирование в контейнере

У меня есть страница, на которой я удалил некоторые элементы со страницы, чтобы она служила моей цели («О странице»), однако я, похоже, нигде не вижу CSS, на котором я могу центрировать контейнер по центру страницы. Я пробовал использовать Position: Center, а также другие методы кода, которые я читал в Интернете, но все они, похоже, хотят работать.

Может кто подскажет, где я сделал свою ошибку.

/* Latest News Area css
============================================================================================ */

.latest_news_area {}

.l_news_inner {}

.l_news_item {
  @include transition;
  .l_news_img {
    overflow: hidden;
    a {
      display: block;
    }
    img {
      @include transition;
      &:hover {
        transform: scale(1.05);
      }
    }
  }
  .l_news_content {
    border: 1px solid #ebebeb;
    border-top: 0px;
    padding: 30px 35px;
    h4 {
      font-size: 18px;
      color: $dip;
      font-family: $pop;
      font-weight: 500;
      @include transition;
      &:hover {
        color: #2bc0a4;
      }
    }
    p {
      font-size: 14px;
      line-height: 26px;
      color: $pfont;
      font-family: $pop;
      font-weight: 400;
      padding: 15px 0px 10px 0px;
    }
  }
  &:hover {
    box-shadow: 0px 25px 49px 0px rgba(58, 74, 88, 0.1);
  }
}


/* Latest News Area css
============================================================================================ */


/* Static Area css
============================================================================================ */

.static_area {
  padding: 100px 0px;
}

.static_inner {}

.static_main_content {
  position: relative;
  .static_social {
    position: absolute;
    left: -60px;
    top: 0px;
  }
}

.static_social {
  ul {
    li {
      margin-bottom: 20px;
      a {
        height: 30px;
        width: 30px;
        text-align: center;
        background: #4c65a8;
        color: #fff;
        display: block;
        border-radius: 50%;
        line-height: 30px;
      }
      &:nth-child(2) {
        a {
          background: #41a1f6;
        }
      }
      &:nth-child(3) {
        a {
          background: #f43535;
        }
      }
      &:nth-child(4) {
        a {
          background: #8f6247;
        }
      }
      &:nth-child(5) {
        margin-bottom: 0px;
        a {
          background: #f0c605;
        }
      }
    }
  }
}

.static_text {
  padding-top: 35px;
  padding-bottom: 15px;
  p {
    font-size: 16px;
    line-height: 26px;
    color: $pfont;
    font-family: $pop;
    &:last-child {
      padding-top: 15px;
    }
  }
}

.static_text2 {
  h3 {
    font-size: 24px;
    color: #1e1e27;
    font-family: $pop;
    font-weight: 500;
  }
  p {
    font-size: 16px;
    line-height: 26px;
    color: $pfont;
    font-family: $pop;
    padding-top: 13px;
  }
}

.media {
  margin: 30px 0px;
  .d-flex {
    h6 {
      font-family: $play;
      font-size: 100px;
      color: $baseColor;
      line-height: 75px;
    }
  }
  .media-body {
    padding-left: 32px;
    p {
      font-size: 18px;
      line-height: 26px;
      color: #1e1e27;
      font-family: $pop;
    }
    h5 {
      font-size: 14px;
      color: #b5aec4;
      font-family: $pop;
      padding-top: 15px;
      a {
        font-size: 16px;
        color: $dip;
        font-family: $pop;
        font-weight: 500;
        @include transition;
        &:hover {
          color: $baseColor;
        }
      }
    }
  }
}

.right_sidebar_area {
  padding-left: 20px;
}

.right_widget {
  margin-bottom: 45px;
}

.r_w_title {
  padding-bottom: 20px;
  h3 {
    font-size: 22px;
    color: #1e1e27;
    font-family: $pop;
    font-weight: 500;
  }
}

.r_news_widget {
  .news_inner {
    .news_item {
      border-bottom: 1px solid #eeeef0;
      padding-bottom: 14px;
      margin-bottom: 15px;
      h4 {
        font-size: 16px;
        line-height: 26px;
        font-family: $pop;
        font-weight: 500;
        color: #1e1e27;
        padding-bottom: 7px;
        @include transition;
        &:hover {
          color: $baseColor;
        }
      }
      h6 {
        font-size: 14px;
        color: #b5aec4;
        font-family: $pop;
      }
      &:last-child {
        margin-bottom: 0px;
      }
    }
  }
}

.r_cat_widget {
  ul {
    li {
      margin-bottom: 12px;
      a {
        font-size: 16px;
        color: #1e1e27;
        font-family: $pop;
        @include transition;
        padding-left: 20px;
        position: relative;
        &:before {
          content: "";
          height: 8px;
          width: 8px;
          border-radius: 50%;
          background: $baseColor;
          position: absolute;
          left: 0px;
          top: 50%;
          transform: translateY(-50%);
          @include transition;
        }
      }
      &:hover {
        a {
          color: $baseColor;
          &:before {
            left: 5px;
          }
        }
      }
    }
  }
}

.r_tag_widget {
  ul {
    margin-right: -9px;
    li {
      display: inline-block;
      margin-bottom: 9px;
      margin-right: 6px;
      a {
        font-size: 12px;
        color: $pfont;
        font-family: $pop;
        background: #ebebeb;
        display: inline-block;
        padding: 0px 20px;
        text-transform: uppercase;
        line-height: 30px;
        @include transition;
      }
      &:last-child {
        margin-bottom: 0px;
        margin-right: 0px;
      }
      &:hover {
        a {
          color: $baseColor;
        }
      }
    }
  }
}


/* End Static Area css
============================================================================================ */

ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

a {
  text-decoration: none;
  &:hover,
  &:focus {
    text-decoration: none;
    outline: none;
  }
}

.row.m0 {
  margin: 0px;
}

.p0 {
  padding: 0px;
}

body {
  line-height: 26px;
  font-size: 14px;
  font-family: $pop;
}

body,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0px;
  padding: 0px;
}

#success {
  display: none;
}

#error {
  display: none;
}

.display_table {
  display: table;
  width: 100%;
}

.display_table_row {
  display: table-row;
}

.display_table_cell {
  display: table-cell;
  float: none !important;
}

.p_100 {
  padding: 100px 0px;
}

iframe {
  border: none;
}

i {
  &:before {
    margin-left: 0px !important;
  }
}


/* Container Custome Code css
============================================================================================ */

@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}


/* End Container Custome Code css
============================================================================================ */


/* Main title css
============================================================================================ */

.main_title {
  h2 {
    font-size: 40px;
    line-height: 48px;
    font-family: $pop;
    color: $dip;
    font-weight: 500;
  }
  p {
    font-size: 16px;
    color: $pfont;
    font-family: $pop;
    line-height: 26px;
    padding-top: 15px;
  }
}

.center_title {
  color: #fff;
  text-align: center;
  padding-bottom: 40px;
  h2 {
    font-size: 40px;
    font-family: $pop;
    font-weight: 500;
  }
  p {
    font-size: 16px;
    color: #fff;
    font-family: $pop;
    line-height: 26px;
    padding-top: 10px;
  }
}

.b_center_title {
  text-align: center;
  padding-bottom: 50px;
  h2 {
    font-size: 40px;
    font-family: $pop;
    font-weight: 500;
    color: $dip;
  }
  p {
    font-size: 16px;
    color: #fff;
    font-family: $pop;
    line-height: 26px;
    padding-top: 10px;
    color: $pfont;
  }
}


/* Main title css
============================================================================================ */

<section class = "static_area">
  <div class = "container">
    <div class = "static_inner">
      <div class = "row">
        <div class = "col-lg-9">
          <div class = "static_main_content">
            <div class = "static_img">
              <img class = "img-fluid" src = "img/static-1.jpg" alt = "">
            </div>
            <div class = "static_text">
              <p>Some text.</p><br>
              <p>Some more text.</p><br>
              <p>Even more text.</p><br>
              <p>Wow... quite a lot of text</p><br>
            </div>
            <section class = "testimonials_area p_100">
              <div class = "container">
                <div class = "testimonials_slider owl-carousel">
                  <div class = "item">
                    <div class = "media">
                      <img class = "d-flex rounded-circle" src = "img/testimonials-1.png" alt = "">
                      <div class = "media-body">
                        <img src = "img/dotted-icon-1.png" alt = "">
                        <p>Some text.</p>
                        <h4><a href = "#">Smith</a> - Human</h4>
                      </div>
                    </div>
                  </div>
                  <div class = "item">
                    <div class = "media">
                      <img class = "d-flex rounded-circle" src = "img/testimonials-1.png" alt = "">
                      <div class = "media-body">
                        <img src = "img/dotted-icon-1.png" alt = "">
                        <p>Some more text.</p>
                        <h4><a href = "#">Smith</a> - Human</h4>
                      </div>
                    </div>
                  </div>
                  <div class = "item">
                    <div class = "media">
                      <img class = "d-flex rounded-circle" src = "img/testimonials-1.png" alt = "">
                      <div class = "media-body">
                        <img src = "img/dotted-icon-1.png" alt = "">
                        <p>Even more text</p>
                        <h4><a href = "#">Smith </a> - Human</h4>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

html css centering

14.03.2018 20:22

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Ответы 2

Не существует такой вещи, как position:center;, вам нужно определить статическую ширину для контейнера, а затем использовать margin:0 auto; для его центрирования.

.container {
  width:600px;
  height:500px;
  background:black;
  margin:0 auto; /* this will center the container */
}

<div class = "container"></div>

14.03.2018 20:25

Задайте фиксированную ширину и примените маржу: 0 авто;

Всегда, когда люди спрашивают о том, как сосредоточить вещи, мне нравится ссылаться на этот пост под названием Как центрировать вещи из W3C. Полезная информация Если вы хотите немного узнать о.

/* Latest News Area css
============================================================================================ */

.latest_news_area {}

.l_news_inner {}

.l_news_item {
  @include transition;
  .l_news_img {
    overflow: hidden;
    a {
      display: block;
    }
    img {
      @include transition;
      &:hover {
        transform: scale(1.05);
      }
    }
  }
  .l_news_content {
    border: 1px solid #ebebeb;
    border-top: 0px;
    padding: 30px 35px;
    h4 {
      font-size: 18px;
      color: $dip;
      font-family: $pop;
      font-weight: 500;
      @include transition;
      &:hover {
        color: #2bc0a4;
      }
    }
    p {
      font-size: 14px;
      line-height: 26px;
      color: $pfont;
      font-family: $pop;
      font-weight: 400;
      padding: 15px 0px 10px 0px;
    }
  }
  &:hover {
    box-shadow: 0px 25px 49px 0px rgba(58, 74, 88, 0.1);
  }
}


/* Latest News Area css
============================================================================================ */


/* Static Area css
============================================================================================ */

.static_area {
  padding: 100px 0px;
}

.static_inner {}

.static_main_content {
  position: relative;
  .static_social {
    position: absolute;
    left: -60px;
    top: 0px;
  }
}

.static_social {
  ul {
    li {
      margin-bottom: 20px;
      a {
        height: 30px;
        width: 30px;
        text-align: center;
        background: #4c65a8;
        color: #fff;
        display: block;
        border-radius: 50%;
        line-height: 30px;
      }
      &:nth-child(2) {
        a {
          background: #41a1f6;
        }
      }
      &:nth-child(3) {
        a {
          background: #f43535;
        }
      }
      &:nth-child(4) {
        a {
          background: #8f6247;
        }
      }
      &:nth-child(5) {
        margin-bottom: 0px;
        a {
          background: #f0c605;
        }
      }
    }
  }
}

.static_text {
  margin:0 auto;
  width:50%;
  padding-top: 35px;
  padding-bottom: 15px;
  width:50%;
  p {
    font-size: 16px;
    line-height: 26px;
    color: $pfont;
    font-family: $pop;
    &:last-child {
      padding-top: 15px;
    }
  }
}

.static_text2 {
  h3 {
    font-size: 24px;
    color: #1e1e27;
    font-family: $pop;
    font-weight: 500;
  }
  p {
    font-size: 16px;
    line-height: 26px;
    color: $pfont;
    font-family: $pop;
    padding-top: 13px;
  }
}

.media {
  margin: 30px 0px;
  .d-flex {
    h6 {
      font-family: $play;
      font-size: 100px;
      color: $baseColor;
      line-height: 75px;
    }
  }
  .media-body {
    padding-left: 32px;
    p {
      font-size: 18px;
      line-height: 26px;
      color: #1e1e27;
      font-family: $pop;
    }
    h5 {
      font-size: 14px;
      color: #b5aec4;
      font-family: $pop;
      padding-top: 15px;
      a {
        font-size: 16px;
        color: $dip;
        font-family: $pop;
        font-weight: 500;
        @include transition;
        &:hover {
          color: $baseColor;
        }
      }
    }
  }
}

.right_sidebar_area {
  padding-left: 20px;
}

.right_widget {
  margin-bottom: 45px;
}

.r_w_title {
  padding-bottom: 20px;
  h3 {
    font-size: 22px;
    color: #1e1e27;
    font-family: $pop;
    font-weight: 500;
  }
}

.r_news_widget {
  .news_inner {
    .news_item {
      border-bottom: 1px solid #eeeef0;
      padding-bottom: 14px;
      margin-bottom: 15px;
      h4 {
        font-size: 16px;
        line-height: 26px;
        font-family: $pop;
        font-weight: 500;
        color: #1e1e27;
        padding-bottom: 7px;
        @include transition;
        &:hover {
          color: $baseColor;
        }
      }
      h6 {
        font-size: 14px;
        color: #b5aec4;
        font-family: $pop;
      }
      &:last-child {
        margin-bottom: 0px;
      }
    }
  }
}

.r_cat_widget {
  ul {
    li {
      margin-bottom: 12px;
      a {
        font-size: 16px;
        color: #1e1e27;
        font-family: $pop;
        @include transition;
        padding-left: 20px;
        position: relative;
        &:before {
          content: "";
          height: 8px;
          width: 8px;
          border-radius: 50%;
          background: $baseColor;
          position: absolute;
          left: 0px;
          top: 50%;
          transform: translateY(-50%);
          @include transition;
        }
      }
      &:hover {
        a {
          color: $baseColor;
          &:before {
            left: 5px;
          }
        }
      }
    }
  }
}

.r_tag_widget {
  ul {
    margin-right: -9px;
    li {
      display: inline-block;
      margin-bottom: 9px;
      margin-right: 6px;
      a {
        font-size: 12px;
        color: $pfont;
        font-family: $pop;
        background: #ebebeb;
        display: inline-block;
        padding: 0px 20px;
        text-transform: uppercase;
        line-height: 30px;
        @include transition;
      }
      &:last-child {
        margin-bottom: 0px;
        margin-right: 0px;
      }
      &:hover {
        a {
          color: $baseColor;
        }
      }
    }
  }
}


/* End Static Area css
============================================================================================ */

ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

a {
  text-decoration: none;
  &:hover,
  &:focus {
    text-decoration: none;
    outline: none;
  }
}

.row.m0 {
  margin: 0px;
}

.p0 {
  padding: 0px;
}

body {
  line-height: 26px;
  font-size: 14px;
  font-family: $pop;
}

body,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0px;
  padding: 0px;
}

#success {
  display: none;
}

#error {
  display: none;
}

.display_table {
  display: table;
  width: 100%;
}

.display_table_row {
  display: table-row;
}

.display_table_cell {
  display: table-cell;
  float: none !important;
}

.p_100 {
  padding: 100px 0px;
}

iframe {
  border: none;
}

i {
  &:before {
    margin-left: 0px !important;
  }
}


/* Container Custome Code css
============================================================================================ */

@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}


/* End Container Custome Code css
============================================================================================ */


/* Main title css
============================================================================================ */

.main_title {
  h2 {
    font-size: 40px;
    line-height: 48px;
    font-family: $pop;
    color: $dip;
    font-weight: 500;
  }
  p {
    font-size: 16px;
    color: $pfont;
    font-family: $pop;
    line-height: 26px;
    padding-top: 15px;
  }
}

.center_title {
  color: #fff;
  text-align: center;
  padding-bottom: 40px;
  h2 {
    font-size: 40px;
    font-family: $pop;
    font-weight: 500;
  }
  p {
    font-size: 16px;
    color: #fff;
    font-family: $pop;
    line-height: 26px;
    padding-top: 10px;
  }
}

.b_center_title {
  text-align: center;
  padding-bottom: 50px;
  h2 {
    font-size: 40px;
    font-family: $pop;
    font-weight: 500;
    color: $dip;
  }
  p {
    font-size: 16px;
    color: #fff;
    font-family: $pop;
    line-height: 26px;
    padding-top: 10px;
    color: $pfont;
  }
}


/* Main title css
============================================================================================ */

<section class = "static_area">
  <div class = "container">
    <div class = "static_inner">
      <div class = "row">
        <div class = "col-lg-9">
          <div class = "static_main_content">
            <div class = "static_img">
              <img class = "img-fluid" src = "img/static-1.jpg" alt = "">
            </div>
            <div class = "static_text">
              <p>Some text.</p><br>
              <p>Some more text.</p><br>
              <p>Even more text.</p><br>
              <p>Wow... quite a lot of text</p><br>
            </div>
            <section class = "testimonials_area p_100">
              <div class = "container">
                <div class = "testimonials_slider owl-carousel">
                  <div class = "item">
                    <div class = "media">
                      <img class = "d-flex rounded-circle" src = "img/testimonials-1.png" alt = "">
                      <div class = "media-body">
                        <img src = "img/dotted-icon-1.png" alt = "">
                        <p>Some text.</p>
                        <h4><a href = "#">Smith</a> - Human</h4>
                      </div>
                    </div>
                  </div>
                  <div class = "item">
                    <div class = "media">
                      <img class = "d-flex rounded-circle" src = "img/testimonials-1.png" alt = "">
                      <div class = "media-body">
                        <img src = "img/dotted-icon-1.png" alt = "">
                        <p>Some more text.</p>
                        <h4><a href = "#">Smith</a> - Human</h4>
                      </div>
                    </div>
                  </div>
                  <div class = "item">
                    <div class = "media">
                      <img class = "d-flex rounded-circle" src = "img/testimonials-1.png" alt = "">
                      <div class = "media-body">
                        <img src = "img/dotted-icon-1.png" alt = "">
                        <p>Even more text</p>
                        <h4><a href = "#">Smith </a> - Human</h4>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

14.03.2018 20:27

Другие вопросы по теме

Не могу переместить панель навигации в центр / изменить ее размер, и страница переполнится

Как удалить выделение выделения css на вкладках макета dojo dijit

Пустое пространство над логотипом и панелями меню на мобильных устройствах (WordPress)

Редактировать страницы сообщений с помощью PHP и CSS в Wordpress?

Microsoft Edge усиливает поля при печати CSS

Как удалить эффект: after для определенного идентификатора, когда класс применяет эффект

Как переопределить навигацию css внутри ul, я не хочу каждый раз добавлять класс (no_pad)

Вертикальное выравнивание вложенного содержимого

Изменение размера страницы ниже 1200 пикселей приводит к смещению содержимого

Как автоматически сделать ширину многострочного текстового элемента так, чтобы текст внутри соответствовал определенной высоте без переполнения?

Центрирование в контейнере

Ответы 2

Другие вопросы по теме

Похожие вопросы