выровнять изображение по центру по вертикали и горизонтали

Question

выровнять изображение по центру по вертикали и горизонтали

0

У меня есть следующий jsfiddle. Я пытаюсь получить фотографии кошек внутри черного ящика, чтобы выровнять по центру и середине так, чтобы вокруг изображения была черная рамка, если она не идеально вписывается в контейнер. Я пробовал несколько разных методов с использованием line-height:100px с vertical-align:middle по vertical-align:middle также text-align:middle но ни один из них не работает.

Yamaha32088 05 окт. 2013, в 23:40

Источник

1

css-tricks.com/centering-in-the-unknown
Martin Bean 05 окт. 2013, в 21:15
5

jsfiddle.net/Pv8uN/3
CBroe 05 окт. 2013, в 21:17

Теги:

html

css

3 ответа

0

Без абсолютного позиционирования.

Посмотрите эту рабочую скрипку

ADD text-align: center; в .photoContainer

.photoContainer:before
{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-left: -5px;
}

и ADD vertical-align: middle; в .photoContainer img

avrahamcool 05 окт. 2013, в 20:22

0

Или, если вы не хотите, чтобы позиция была абсолютной, попробуйте следующее:

.content{
    display:inline-block;
    width:750px;
    margin-top:10px;
    margin-bottom:10px;
    height:auto;
    background-color:orange;
}

.photoContainer {
    width:200px;
    height:200px;
    background-color:#000000;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.content img {
    max-width:200px;
    max-height:200px;
    vertical-align: middle;
}

см. скрипку: http://jsfiddle.net/aAMJS/

Rares Hideg 05 окт. 2013, в 19:34

0

Почему голосование?
avrahamcool 05 окт. 2013, в 21:29

Ещё вопросы

Ehtesham · Accepted Answer · 2013-10-05T19-24-00.000Z

В этих сценариях, когда ширина/высота содержащего элемента известна, я использую абсолютную позицию и margin auto. Дайте относительное положение содержащего элемента и сделайте изображение абсолютным. margin: auto заставит изображение отображаться в абсолютном центре.

.photoContainer img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

см. скрипку http://jsfiddle.net/Pv8uN/1/