У меня есть img
в div (class = "top_image"
), и я хочу, чтобы это изображение было точно в середине div, но ничего, что я пытаюсь сделать, не работает...
Спасибо за любую помощь!
Каждое опубликованное здесь решение предполагает, что вы знаете размеры вашего img
, что не является обычным сценарием. Кроме того, посадка размеров в раствор болезненна.
Просто установите:
/* for the img inside your div */
display: block;
margin-left: auto;
margin-right: auto;
или
/* for the img inside your div */
display: block;
margin: 0 auto;
Это все.
Обратите внимание, что вам также нужно будет установить начальную min-ширину
для вашего внешнего div
.
выравнивание текста: центр будет работать только для горизонтального центрирования. Чтобы он находился в полном центре, вертикальном и горизонтальном, вы можете сделать следующее:
div
{
position: relative;
}
div img
{
position: absolute;
top: 50%;
left: 50%;
margin-left: [-50% of your image's width];
margin-top: [-50% of your image's height];
}
Очень простое и элегантное решение для этого предоставляется W3C. Просто используйте поле: 0 авто декларация следующим образом:
.top_image img { margin:0 auto; }
Больше информации и примеры от W3C .
<div class="outer">
<div class="inner">
<img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s320/tall+copy.jpg" alt="tall image" />
</div>
</div>
<hr />
<div class="outer">
<div class="inner">
<img src="http://www.5150studios.com.au/wp-content/uploads/2012/04/wide.jpg" alt="wide image" />
</div>
</div>
CSS
img
{
max-width: 100%;
max-height: 100%;
display: block;
margin: auto auto;
}
.outer
{
border: 1px solid #888;
width: 100px;
height: 100px;
}
.inner
{
display:table-cell;
height: 100px;
width: 100px;
vertical-align: middle;
}
Я думаю, что лучше сделать текстовый центр для div и позволить изображению позаботиться о высоте. Просто укажите верхнюю и нижнюю прокладку для div, чтобы иметь пространство между изображением и div. Посмотрите на этот пример:
Я надеюсь, что это будет полезно:
.top_image img{
display: block;
margin: 0 auto;
}
Это заняло у меня слишком много времени, чтобы понять. Я не могу поверить, что никто не упомянул центральные теги.
Ex:
<center><img src = "yourimage.png"/></center>
и если вы хотите изменить размер изображения до процента:
<center><img src = "yourimage.png" width = "75%"/></center>
Г.Г. Америка