2

есть html:

<div class="row">
          <? for($i=0; $i < count($alumni); $i++) { ?>
            <div class="span2">
              <img src="<?=$alumni[$i]['image'];?>">
            </div>
          <? } ?>
        </div>

есть css:

.row .span2 {
width: 135px;
height: 135px;
display: table-cell;
vertical-align: middle;
text-align: center;
line-height: 135px;
margin: 0px;
padding: 0px;
}

Нужно выравнивать картинку по центру, а она не выравнивается. Кто может подсказать другие способы?

1

7 ответов 7

11

Можно в CSS задать:

.row img{
      display: block;
      margin: 0 auto; 
    }
2
  • только указать doctype надо)) честно, сталкивался, тогда не поможет)
    – Sleepless
    25 дек 2013 в 13:39
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "w3.org/TR/html4/loose.dtd"> доктайп есть, но не помогло :( 25 дек 2013 в 13:45
2

Отцентровать вертикально? Вы на верном пути.

Только по именам классов очень похоже, что вы используете bootstrap 2, а в этом фреймворке для классов span* задано float: left, что противоречит display: table-cell. Укажите явно float: none.

1

А сделать картинку фоном этого дива в бы не хотели?

.row {
    background: url(../img/картинка.jpg) no-repeat center center;
    width: 135px;
    height: 135px;
}
1
.row .span2{
    display:flex;
    justify-content: center; /*центрируем элемент по горизонтали */
    align-items: center; /* и вертикали */
    width: 200px; /* задали размеры блоку-родителю */
    height: 200px;
    overflow: hidden; /* если элемент больше блока-родителя – обрезаем лишнее */
}

Для img ничего прописывать не нужно. Любой блок внутри .row .span2 будет центрироваться сам.

Подробнее о центрировании при помощи флексбокса http://jedicss.com/css-kartinka-po-centru/

1
  • Поясните, почему вы считаете, что ваш ответ решит проблему ОП.
    – 0xdb
    8 апр 2017 в 15:35
1

Если нужно по горизонтали и вертикали выровнять по центру, то так:

.row{
   position: relative;
}
.span2 {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
0
    .span2{
        display: flex;
        justify-content: center;
    }

    .span2 img{
        align-self:center;
    }
0
.span2{
    display: flex;
    width: 3rem;
    height: 3rem;
}

.span2 img{
    display: block;
    object-fit: scale-down;
    object-position: center;

}
1

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