вертикальное выравнивание изображения в div

Хорошо, вот проблема, у меня есть изображения разных размеров, но это не имеет большого значения, потому что их ширина всегда больше, чем их высота, и все изображения изменены до ширины 100 пикселей (высота все еще отличается для каждого изображения)

Я пытаюсь выровнять изображения по вертикали внутри div размером 100 x 100 пикселей. Я пробовал все виды вещей. line-height, margin's auto, методы ячеек таблицы у меня не работают...

Вот html:

<div class="kassabon_product_image">
<img src="product1.png" />
</div>

а вот СС

.kassabon_product_image{
float: left;
display:table-cell;
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #D5D0C6;
line-height: 100px;
vertical-align:middle;
}

.kassabon_product_image img{
width: 100px;
}

image vertical-alignment html alignment css
person TristanSchaaf    schedule 31.10.2012    source источник
comment
Насколько я помню, этот вопрос задавали здесь в Stack Overflow не менее 10 раз. Здесь, наверное, сотни таких вопросов. Пожалуйста, поищите перед публикацией.   -  person Madara's Ghost    schedule 31.10.2012
comment
Я искал его в Google и Stack Overflow не менее 1,5 часов, ни один из приведенных ответов мне не помог. Я попытался установить поля сверху и снизу на авто, играя с display:table-cell; метод, даже видел что-то с position:relative; верх: 50%; (но это просто поместило верхнюю часть изображения в половину div). Я публикую это, потому что опубликованные ответы не работают в этом случае по какой-то странной причине.   -  person TristanSchaaf    schedule 31.10.2012
comment
Здесь, на Stack Overflow, ожидается, что вы объясните, что вы пробовали, и почему это не сработало для вас. Это покажет ваши усилия, а также даст нам правильное направление, чтобы помочь вам. Кроме того, само решение, которое вы приняли как правильное, я помню, что ответил именно на него как минимум 2 раза.   -  person Madara's Ghost    schedule 31.10.2012

Ответы (2)


arrow_upward
3
arrow_downward 

.kassabon_product_image{
    display:table-cell;
    vertical-align:middle;
}

Удалите вертикальное выравнивание из изображения, и это должно помочь.

person Reza Assar    schedule 31.10.2012
comment
Почему-то не работает. Как я уже сказал в вопросе, вертикальное выравнивание в родительском div не работает. - person TristanSchaaf; 31.10.2012
comment
Взгляните на эту скрипту jsfiddle.net/vLYpz, которую я создал и продвигаюсь дальше. Он должен работать нормально. - person Reza Assar; 31.10.2012
comment
Ну... это было глупо с моей стороны. использование float в сочетании с выравниванием по вертикали просто отключает выравнивание. Удалил поплавок и теперь он работает. Спасибо :) - person TristanSchaaf; 31.10.2012
comment
Плавающие элементы отменяют свойство отображения (по сути, задают для него значение display:block). Вы можете обернуть родительский элемент другим div, который плавает, или, в зависимости от вашего дизайна, установите элемент рядом с этим для отображения: таблица-ячейка также (дает результаты, аналогичные двум плавающим элементам). Действительно зависит от того, что вы пытаетесь выполнить хотя. - person Reza Assar; 31.10.2012
comment
Хм, не подумал об отображении: таблица-ячейка. Спасибо - person TristanSchaaf; 31.10.2012
comment
@ Дженни О'Рейли, да, это так. У меня он отлично работает в IE 8-10. - person Panama Jack; 20.07.2013

arrow_upward
1
arrow_downward

см. комментарии

.kassabon_product_image{
float: left;
text-align: center; /*using text-align:center in the outer div will center all elements inside the div*/
display:inline-block;
width: 100px;
height: 100px;
background-color: red;
border: 1px solid #D5D0C6;
line-height: 100px;
}

.kassabon_product_image img{
width: 100px;
/*vertical-align:middle;*/ /*this is the wrong place to align*/
}
person Sabe    schedule 31.10.2012
comment
Насколько я знаю, text-align выполняет только горизонтальное выравнивание. Но проверил это в любом случае, но нет, не работает. - person TristanSchaaf; 31.10.2012