is html:

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

have css:

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

Answer 1, authority 100%

Center vertically?
You are on the right track.

By class names alone, it looks like you are using bootstrap 2 and this framework has span * classes set to float: left . which is contrary to display: table-cell . Specify explicitly float: none .

Answer 2, authority 93%

You can set in CSS :

. row img {
   display: block;
   margin: 0 auto;
  }

Answer 3, authority 50%

Wouldn’t you like to make a picture of this diva’s background?

. row {
  background: url (../ img / image.jpg) no-repeat center center;
  width: 135px;
  height: 135px;
}

Answer 4, authority 50%

. row .span2 {
  display: flex;
  justify-content: center; / * center the element horizontally * /
  align-items: center; / * and verticals * /
  width: 200px; / * set the dimensions to the parent block * /
  height: 200px;
overflow: hidden; / * if the element is larger than the parent block, cut off the excess * /
}

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

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

Answer 5, authority 50%

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

. row {
  position: relative;
}
.span2 {
 margin: auto;
 position: absolute;
 top: 0; left: 0; bottom: 0; right: 0;
}

Answer 6

.span2 {
    display: flex;
    justify-content: center;
  }
  .span2 img {
    align-self: center;
  }

Answer 7

. span2 {
  display: flex;
  width: 3rem;
  height: 3rem;
}
.span2 img {
  display: block;
  object-fit: scale-down;
  object-position: center;
}