Как центрировать изображение с неизвестным размером внутри div? - PullRequest
Новая
       2

Как центрировать изображение с неизвестным размером внутри div?

11 голосов
/ 08 сентября 2010

Итак, у меня есть div с этими параметрами: 

container {
position:fixed;
background-color: rgba(50,50,50,0.7);
width:100%;
height:100%;
display:none;}

Содержит изображение с неизвестным размером (размер - динамический, и он может быть другим).

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

Пожалуйста, помогите

Ответы [ 6 ]

25 голосов
/ 08 сентября 2010

Метод фонового изображения будет работать с background-position: center center, к сожалению, вы потеряете контроль над масштабированием изображения.

Вы можете установить свое изображение следующим образом: 

position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;

PS.Имейте в виду, что это будет по центру относительно его ближайшего расположенного родителя.

4 голосов
/ 08 сентября 2010

Добавить следующее:

Первые две линии центрируют его вертикально, а последние - горизонтально. 

display: table-cell;
vertical-align: middle ;
text-align: center;

Более подробную информацию можно найти здесь: http://www.w3.org/Style/Examples/007/center

0 голосов
/ 08 сентября 2010

http://zoffix.com/new/absolute-center-random-width-height.html

Это довольно приличный пример.Обычно вы используете table / вертикальное выравнивание для современных браузеров и позиционирование +% s для IE.

0 голосов
/ 08 сентября 2010

Я считаю, что самый простой способ сделать это: 

.container img {
    display:block;
    margin:auto;
}

настроить .container в соответствии с вашим div (не уверен, что у вас был класс или ID)

о, я не прочитал все ваши вопросы.

это похоже на работу: 

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style><![endif]-->

полный кредит: http://www.brunildo.org/test/img_center.html

0 голосов
/ 08 сентября 2010

Это будет по центру вертикально и горизонтально. 

#container {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

http://jsfiddle.net/nfBDT/

0 голосов
/ 08 сентября 2010

Самый простой кросс-браузерный способ - установить динамическое изображение в качестве свойства фона для #container: 

<div id="container" style="background: url(path/to/image.png) no-repeat 50% 50%"></div>
...