Bootstrap. Выровнять содержимое по центру контейнера

#html #css #bootstrap

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


В 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;
}

  

    

      
Oxxxymiron - Город под подошвой
      
Oxxxymiron - Город под подошвой
      
Oxxxymiron - Город под подошвой
      
Oxxxymiron - Город под подошвой
      
Oxxxymiron - Город под подошвой
      
Oxxxymiron - Город под подошвой

      
Oxxxymiron - Город под подошвой
      
Oxxxymiron - Город под подошвой
      
Oxxxymiron - Город под подошвой
      
Oxxxymiron - Город под подошвой
      
Oxxxymiron - Город под подошвой
      
Oxxxymiron - Город под подошвой
    
  




    

Ответы

Ответ 1

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

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

Oxxxymiron - Город под подошвой


Но строки кода и без того чересчур длинные и однообразные. А по сути .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;
}

  

    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой

    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
  



Ответ 2

@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;
}

  

    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой

    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой
    
Oxxxymiron - Город под подошвой