как центрировать изображение по вертикали и горизонтали на плавающем элементе div, не зная ширины или высоты изображения?

Question

Хорошие браузеры вне уравнения, он должен быть действительным на IE 8 и выше; Как центрировать изображение на плавающем элементе div, не зная ширины или высоты изображения?

Изображение семантически релевантно, поэтому оно не может быть фоном; HTML:

<div class="logo-organization-home">
 <img src="images/logoOrganization1.png" alt="logo organization 1"/>
</div>

и css:

.logo-organization-home {
    float:left;
    background-color: #fafaed;
    border: 4px solid #f7f4ee;
    width: 18%;
}

Я пробовал показывать: table-cell; нет успеха; Я пробовал выравнивание текста по центру с определенным отступом: безуспешно;

Неудачная попытка: http://cssdesk.com/pQnRG

Спасибо

Answer 1

Если содержащий элемент имеет ширину, вы можете использовать следующее:

.logo-organization-home img {
    display:block;
    margin:0 auto;
}

Answer 2

Что касается горизонтального центрирования, пример, на который вы ссылаетесь здесь: http://cssdesk.com/pQnRG, не работает должным образом, так как ширина div меньше ширины изображения.Например, если вы увеличите ширину до 40%, вы увидите, что изображение будет отцентрировано правильно, даже если содержащийся div имеет отступ.

Что касается вертикального центрирования, для отображения: table-cell "требуется! DOCTYPE. IE9 "на IE8.http://www.w3schools.com/cssref/pr_class_display.asp В качестве альтернативы, хотя и неэтично, вы можете использовать таблицу / строку / ячейку непосредственно в качестве дополнительного контейнера:

.logo-organization-home {
    float:left;
    background-color: #fafaed;
    border: 4px solid #f7f4ee;
    width: 18%;
}
table{
    width:100%;
    height:100%;
}
td{
    vertical-align:center;
    text-align:center;
}

И HTML:

<div class="logo-organization-home">
    <table><tr><td>
        <img src="images/logoOrganization1.png" alt="logo organization 1"/>
    </td></tr></table>
</div>

Answer 3

Для горизонтального центрирования используйте: 'text-align: center' для .logo-organization-home