Center alignment of the image div

There is html: 

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

There is css: 

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

You need to align the image in the center, and it does not align. Who can suggest other ways?

Author: user185447, 2013-12-25
Source

7 answers

Center vertically? You're on the right track.

Just by the class names, it looks very much like you are using bootstrap 2, and in this framework, span* is set to float: left, which contradicts display: table-cell. Specify float: none explicitly.

 2
Author: Елена Левина, 2015-07-13 03:48:06

You can specify in CSS :

.row img{
      display: block;
      margin: 0 auto; 
    }
 10
Author: HA3IK, 2013-12-25 13:34:22

And would you like to make a picture of the background of this diva?

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

You don't need to write anything for img. Any block inside. row. span2 will center itself.

Learn more about centering with the flexbox http://jedicss.com/css-kartinka-po-centru/

 1
Author: Найкрис Кроули, 2017-04-10 09:14:12

If you need to align horizontally and vertically in the center, then so:

.row{
   position: relative;
}
.span2 {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
 1
Author: Nazar Lesyuk, 2018-05-17 20:57:12 
    .span2{
        display: flex;
        justify-content: center;
    }

    .span2 img{
        align-self:center;
    }
 0
Author: pamagiti, 2016-09-04 18:11:16 
.span2{
    display: flex;
    width: 3rem;
    height: 3rem;
}

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

}
 0
Author: Тимофей Басалай, 2020-12-23 07:36:46