3

Имеется вот такой контейнер. Как выровнять его содержимое по центру? А нужно, чтобы все это было по центру

В bootstrap есть тег center-top. Я его пробовал по разному применять, но нужного результата он мне не дал. Код ниже.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.top-cover {
  width: 100px;
  height: 100px;
  background-color: black;
  margin-right: 10px;	
  margin-top: 15px;
}

.top-name {
  display: block;
  width: 100px;
  max-height: 40px;
  overflow: hidden;
}
<div class="container bgcont center-block">
  <div class="row background-row">
    <div class="centered-top">
      <div class="col-lg-2 col-md-3 col-sm-3 col-xs-6"><div class="top-cover"></div><p class="text-center top-name">Oxxxymiron - Город под подошвой</p></div>
      <div class="col-lg-2 col-md-3 col-sm-3 col-xs-6"><div class="top-cover"></div><p class="text-center top-name">Oxxxymiron - Город под подошвой</p></div>
      <div class="col-lg-2 col-md-3 col-sm-3 col-xs-6"><div class="top-cover"></div><p class="text-center top-name">Oxxxymiron - Город под подошвой</p></div>
      <div class="col-lg-2 col-md-3 col-sm-3 col-xs-6"><div class="top-cover"></div><p class="text-center top-name">Oxxxymiron - Город под подошвой</p></div>
      <div class="col-lg-2 col-md-3 col-sm-3 col-xs-6"><div class="top-cover"></div><p class="text-center top-name">Oxxxymiron - Город под подошвой</p></div>
      <div class="col-lg-2 col-md-3 col-sm-3 col-xs-6"><div class="top-cover"></div><p class="text-center top-name">Oxxxymiron - Город под подошвой</p></div>

      <div class="col-lg-2 col-md-3 col-sm-3 col-xs-6"><div class="top-cover"></div><p class="text-center top-name">Oxxxymiron - Город под подошвой</p></div>
      <div class="col-lg-2 col-md-3 col-sm-3 col-xs-6"><div class="top-cover"></div><p class="text-center top-name">Oxxxymiron - Город под подошвой</p></div>
      <div class="col-lg-2 col-md-3 col-sm-3 col-xs-6"><div class="top-cover"></div><p class="text-center top-name">Oxxxymiron - Город под подошвой</p></div>
      <div class="col-lg-2 col-md-3 col-sm-3 col-xs-6"><div class="top-cover"></div><p class="text-center top-name">Oxxxymiron - Город под подошвой</p></div>
      <div class="col-lg-2 col-md-3 col-sm-3 col-xs-6"><div class="top-cover"></div><p class="text-center top-name">Oxxxymiron - Город под подошвой</p></div>
      <div class="col-lg-2 col-md-3 col-sm-3 col-xs-6"><div class="top-cover"></div><p class="text-center top-name">Oxxxymiron - Город под подошвой</p></div>
    </div>
  </div>
</div>

3
  • 1
    <div class="col-lg-2 col-md-3 col-sm-3 col-xs-6 text-center"> может поможет, а может и нет, без css стилей внутренних элементов трудно сказать
    – MasterAlex
    19 мая 2016 в 19:39
  • Не помогло. Добавил стили, посмотри, пожалуйста. Но не думаю, что там много чего интересного. 19 мая 2016 в 19:45
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). 20 мая 2016 в 8:00

2 ответа 2

5

В бутстрапе есть класс .center-block, который превращает элемент в блок и выравнивает его по центру контейнера. Нужно использовать именно его, а не .center-top или .centered-top.

Чтобы этот класс выровнял блоки по центру ячеек, нужно применить его к самим блокам, а из .top-cover удалить margin-right: 10px;.

<div class="col-lg-2 col-md-3 col-sm-3 col-xs-6"><div class="top-cover center-block"></div><p class="top-name center-block text-center">Oxxxymiron - Город под подошвой</p></div>

Но строки кода и без того чересчур длинные и однообразные. А по сути .center-block добавляет к блокам margin-left: auto; margin-right: auto;. Поэтому можно задать эти свойства стилям .top-cover и .top-name, которые вы уже используете, и обойтись без .center-block. А к .top-name добавить ещё и text-align: center;.

Кроме того, col-lg-2 col-md-3 col-sm-3 col-xs-6 - это то же самое, что и col-lg-2 col-sm-3 col-xs-6. Заменил для красоты на col-lg-2 col-md-3 col-sm-4 col-xs-6. Теперь при разной ширине экрана получается две, три, четыре или шесть колонок.

Проверьте результат:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.top-cover {
  width: 100px;
  height: 100px;
  background-color: black;
  margin-top: 15px;
}

.top-name {
  display: block;
  width: 100px;
  max-height: 40px;
  overflow: hidden;
  text-align: center;
}

.top-cover,
.top-name {
  margin-left: auto;
  margin-right: auto;
}
<div class="container bgcont">
  <div class="row background-row">
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>

    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
  </div>
</div>

0

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.top-cover {
  width: 100px;
  height: 100px;
  background-color: black;
  margin-top: 15px;
}

.top-name {
  display: block;
  width: 100px;
  max-height: 40px;
  overflow: hidden;
  text-align: center;
}

.top-cover,
.top-name {
  margin-left: auto;
  margin-right: auto;
}
<div class="container bgcont">
  <div class="row background-row">
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>

    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></div>
    <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6"><div class="top-cover"></div><p class="top-name">Oxxxymiron - Город под подошвой</p></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.

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