0

Есть блок.

.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>

4 ответа 4

0

.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>

0

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

.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;
}
0
.photo {
    position: relative;
    left: 50%;
    float: left;
}

.photo img {
    position: relative;
    right: 50%;
}
0

Ещё проще и понятней использовать flexbox для выравнивания.

1й вариант

.photo {
  display: flex;
  /* Горизонтальное выравнивание по центру */
  align-items: center;
  /* Вертикальное выравнивание по центру */
  justify-content: center;
}

2й вариант

.photo {
  display: flex;
}

.photo > a {
  /* выравнивание и по горизонтали, и по вертикали */
  /* если надо только по вертикали то задайте margin: auto 0; */
  margin: auto;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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