Как центрировать изображения неизвестных размеров в плавающих коробках фиксированных размеров?

В каждой строке у меня есть три коробки (синие) фиксированных размеров (width: 299px, height: 307px) В каждой коробке есть изображение (розовое) неизвестных размеров. Я знаю только max-width: 262px и max-height: 200px. Под изображением короткий двух-трехстрочный текст. Мне нужно центрировать изображения в пространстве над текстом как по горизонтали, так и по вертикали.

Я установил поля на float:left и установил изображения position:absolute. Я не знаю, как заставить его работать сейчас :(

Изображения должны быть центрированы


html css css-position css-float
person Nicpon    schedule 26.12.2013    source источник
comment
Может быть, попробуйте добавить margin-left: 50%; и margin-right:50% для центрирования изображения   -  person Harif87    schedule 27.12.2013
comment
возможно, вы использовали тег фигуры и высоту строки для центрирования изображения по вертикали, проверьте это codepen.io/anon/pen /mvwEy   -  person G-Cyrillus    schedule 27.12.2013

Ответы (2)


arrow_upward
2
arrow_downward

Самый простой способ — использовать табличное отображение, но для этого требуется много элементов-контейнеров в разметке. Если высота текста также фиксирована, я бы использовал метод «призрака 100% высоты», описанный здесь.

Применяется в вашем случае:

.box{      
  text-align: center;      
  position: relative;

  /* removes spaces between inline-block elements */
  /* another way is to add some negative margin on them */
  font-size: 0;

  /* account for text height */
  padding-bottom: 70px;

  /* +box width, height, float props etc. */
}

.box p{
  position: absolute;
  bottom: 10px;
  left: 5%;
  width: 90%;    
  font-size: 14px;
}

/* the ghost, which forces vertical-align */
.box::before {
  content: '';
  height: 100%;     
  display: inline-block;
  vertical-align: middle;
}

.box img {
  display: inline-block;
  vertical-align: middle;

  /* here you have to resize your images to fit within the box */
  max-width: 100%;
  max-height: 100%; 
  width: auto;
  height: auto;
}

Разметка:

<div class="box"> 
  <img ... />    
  <p>  text... </p>
</div>

тест: http://cssdesk.com/MmrVV

person nice ass    schedule 26.12.2013

arrow_upward
1
arrow_downward 

.image-class {
      display: inline-block;
}

.image-container-div {
      text-align: center;
}

Можно плавать в контейнере... но, возможно, нельзя плавать в классе изображения.

Вы также можете иметь изображение и текст в отдельных контейнерах div, чтобы избежать смещения текста.

person CRABOLO    schedule 26.12.2013