центрировать <IMG /> внутри <DIV>с помощью CSS - PullRequest
Новая
       17

центрировать <IMG /> внутри <DIV>с помощью CSS

10 голосов
/ 10 февраля 2011

Я хочу центрировать изображение внутри div.Div имеет фиксированную ширину 300px.Ширина изображения известна только во время выполнения.Обычно он больше 300 пикселей, поэтому изображение должно быть отцентрировано и обрезано вправо и влево.поле 0 автоматически не работает в этом случае. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">

div{width:300px;border:1px solid red; overflow:hidden}

img{
/* NOTE!!!!
margin:auto; doesn't work when image width is bigger than div width
image width is known only at runtime!!!
*/
}
</style>
</head>

<body>
<div>
    <img src="" />
</div>
</body>
</html>

Спасибо за любые идеи CSS

UPD За этой интересной задачей следует здесь

Ответы [ 4 ]

13 голосов
/ 10 февраля 2011

Предоставление div text-align: center должно работать. (Возможно, вам придется добавить align='center' как свойство, чтобы оно работало в IE6.) Примечание : как указано @streetpc, этот метод не будет работать должным образом, если изображение шире контейнер.

В качестве альтернативы вы также можете использовать изображение в качестве фонового изображения: 

background-image: url(url);
background-position: center top;
12 голосов
/ 10 февраля 2011

Вы можете заставить его работать, если оберните другой элемент вокруг изображения: 

<div class="outer">
    <div class="inner"><img src="" alt="" /></div>
</div>

И следующий CSS: 

.outer {
    width: 300px;
    border: 1px solid red;
    overflow: hidden;
    *position: relative;
}
.inner {
    float: left;
    position: relative;
    left: 50%;
}
img {
    display: block;
    position: relative;
    left: -50%;
}

position: relative на .outer помечен *, поэтому он применяется только к IE6 / 7. Вы можете переместить его в условную таблицу стилей IE, если вы этого хотите, или вообще удалить *. Необходимо избегать переполнения теперь относительно позиционированных детей.

2 голосов
/ 05 сентября 2013

Чтобы центрировать изображение в центре HTML-страницы: 

<p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
<img src="image.jpg" alt="image"/>
</p>
1 голос
/ 11 июля 2017

Вы можете использовать CSS-преобразование для позиционирования элемента: 

div { position: relative; } 
img { position: absolute; left: 50%; transform: translateX(-50%); }
...