CSS img align: как установить выравнивание img по центру в DIV - PullRequest
Новая
       41

CSS img align: как установить выравнивание img по центру в DIV

4 голосов
/ 24 января 2012

Я ищу простой способ выравнивания img по центру справа в DIV, т. Е. Выравнивания по вертикали, середине и горизонтали по правому краю, например:

enter image description here

Я попытался использовать вертикальное выравнивание: середина и плавание: прямо в стилях IMG, но, кажется, не работают вместе. 

<div style='height: 300px; width: 300px'>
    <img src= 'http://www.w3schools.com/tags/smiley.gif' style='vertical-align: middle; float: right;'/>
</div>

Ответы [ 3 ]

9 голосов
/ 24 января 2012

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

Метод 1: высота строки, выравнивание текста и выравнивание по вертикали 

#div1 {
  width: 300px;
  height: 300px;
  background-color: blue;
  line-height: 300px;
  text-align: right;
}
#div1 img {
  vertical-align: middle;
}
<div id="div1">
  <img src="http://dummyimage.com/100x50/fc0/000000.png">&#8203;
</div>

Метод 2: абсолютное / относительное позиционирование, известная высота изображения 

#div1 {
  width: 300px;
  height: 300px;
  background-color: blue;
  position: relative;
}
#div1 img {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -25px; /* -(image_height/2) */
}
<div id="div1">
  <img src="http://dummyimage.com/100x50/fc0/000000.png">
</div>

Метод 3: известны абсолютное / относительное расположение, изображение и высота контейнера 

#div1 {
  width: 300px;
  height: 300px;
  background-color: blue;
}
#div1 img {
  float: right;
  position: relative;
  top: 125px; /* (div_height-image_height)/2 */
}
<div id="div1">
  <img src="http://dummyimage.com/100x50/fc0/000000.png">
</div>

jsFiddle

0 голосов
/ 25 января 2012

Трюк display: table-cell работает хорошо, если это просто изображение, плавающее в div.Но если у вас есть другие элементы, заполняющие изображение, такие как <p>, они будут склонны перемещать изображение по вертикали, поскольку они изменяются в размере браузером.

http://www.brunildo.org/test/img_center.html имеет некоторую полезную информацию окросс-браузерная поддержка и более ранние версии браузеров взламывают, чтобы изображение корректно отображалось в модели сломанной коробки IE.

0 голосов
/ 24 января 2012 
<DIV style='height: 300px; width: 300px;border:1px solid #ff0000;display:table-cell;vertical-align: middle'>
<img src= 'http://www.w3schools.com/tags/smiley.gif' style='float:right;'/>
</DIV>

Кстати, вы используете "styles =" в теге изображения. Это неверно.

...