Выравнивание по центру картинки

298

24 ноября 2016, 10:12

Есть блок.

.photo{ 
    border:1px solid #e3e3e3; 
    text-align:center; 
    width:530px; 
    height:458px; 
} 
     
.photo img{ 
    max-width:500px; 
    max-height:400px; 
}

<div class="photo"> 
  <a href="/<?=$gallery[0]->img?>" data-lightbox="roadtrip" title="my caption"> 
    <img src="/<?=$gallery[0]->img?>" alt="<?=$product->title?>" width="250px"> 
  </a> 
</div>

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

<td valign="middle">
    Фото
</td>

Answer 1

Попробуйте так:

.photo {
  border: 1px solid #e3e3e3;
  display: table-cell;
  height: 458px;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 530px;
}
.photo img{
  max-width:500px;
  max-height:400px;
}

Answer 2

.photo { 
  border: 1px solid #e3e3e3; 
  text-align: center; 
  width: 530px; 
  height: 458px; 
} 
.photo:after { 
  content: ''; 
  height: 100%; 
  display: inline-block; 
  vertical-align: middle; 
} 
.photo img { 
  max-width: 500px; 
  max-height: 400px; 
  background: #ccc; 
  display: inline-block; 
  vertical-align: middle; 
}

<div class="photo"> 
  <a href="/<?=$gallery[0]->img?>" data-lightbox="roadtrip" title="my caption"> 
<img src="/<?=$gallery[0]->img?>" alt="<?=$product->title?>" width="250px"> 
</a> 
</div>