Невозможно центрировать столбец в строке - PullRequest
Новая
       24

Невозможно центрировать столбец в строке

0 голосов
/ 03 июня 2018

Я помещаю столбец внутри строки, которая находится внутри контейнера.Столбец должен быть выровнен по центру и тексту.Пока текст выровнен по центру, но не по столбцу.

Вот HTML & CSS -

HTML - 

<section id="raised-section" class="main main-raised">
        <div class="container">
            <div class="text-section text-center">
                <div class="row">
                    <div class="col-md-8 pos-center">
                        <h1 class="ft-roboto" style="font-weight: 800; color: #3C4858;">Sample Heading</h1>
                        <p class="ft-raleway" style="font-size: 1.15em; color: #999;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

CSS - 

.main {
    background-color: #fff;
    position: relative;
    z-index: 3;
}
.main-raised {
    margin: -100px 30px;
    border-radius: 0.5em;
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
                0 6px 30px 5px rgba(0, 0, 0, 0.12),
                0 8px 10px -5px rgba(0, 0, 0, 0.2); 
}
.text-section {
    padding: 70px 0;
}
.pos-center {
    margin-right: auto;
    margin-left: auto;
}

Все еще не повезло.Пожалуйста, помогите мне, я упускаю что-то, что вызывает выравнивание , как это

1 Ответ

0 голосов
/ 03 июня 2018

Bootstrap имеет сетку , которая состоит из 12 столбцов.

Ваш div занимает 8, поэтому осталось 4, вы можете использовать col-md-offset-2, чтобы толкнуть его слева на двастолбцы и оставьте 2 справа, также удалите определенные поля, так как они переопределяют бустап.

Я заменил поле -100px на 100px из раздела, чтобы мы могли его видеть. 

.main {
  background-color: #fff;
  position: relative;
  z-index: 3;
}

.main-raised {
  margin: 100px 30px;
  border-radius: 0.5em;
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.text-section {
  padding: 70px 0;
}

.pos-center {
  /*margin-right: auto; REMOVED*/
  /*margin-left: auto; REMOVED*/
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section id="raised-section" class="main main-raised">
  <div class="container">
    <div class="text-section text-center">
      <div class="row">
        <div class="col-md-offset-2 col-md-8 pos-center">
          <h1 class="ft-roboto" style="font-weight: 800; color: #3C4858;">Sample Heading</h1>
          <p class="ft-raleway" style="font-size: 1.15em; color: #999;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
    </div>
  </div>
</section>
...