Нужно центрировать изображение на веб-странице с помощью CSS - PullRequest
Новая
       17

Нужно центрировать изображение на веб-странице с помощью CSS

10 голосов
/ 23 марта 2010

Я бы хотел центрировать изображение на странице как по вертикали, так и по горизонтали, даже если размер браузера был изменен.

В настоящее время я использую этот CSS: 

.centeredImage {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -150px;
}

И этот HTML: 

<img class="centeredImage" src="images/logo.png">

Он центрируется в FF, но не в IE (центр изображения расположен в левом верхнем углу). Есть идеи?

-Robot

Ответы [ 13 ]

18 голосов
/ 24 мая 2013

Я решил это так: 

img.class-name{

    position: absolute;
    margin: auto;
    left: 0; 
    right: 0;
    top: 0;
    bottom: 0;  
}
7 голосов
/ 23 марта 2010

Попробуйте использовать это: 

position: absolute
2 голосов
/ 20 марта 2012

Это хитрый способ, но он работает:

CSS: 

html, body, #wrapper {
   height:100%;
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
}
#wrapper td {
   vertical-align: middle;
   text-align: center;
}

HTML: 

<html>
<body>
   <table id="wrapper">
      <tr>
         <td><img src="my_cool_image.png" alt="hello world" /></td>
      </tr>
   </table>
</body>
</html>
1 голос
/ 12 июля 2017

универсальный поцелуй («будь проще и глупее»): 

<p style="text-align: center;"> <img src="myImage.png" /></p>
0 голосов
/ 04 апреля 2015

Одно изображение в Интернете и отзывчивое

Фоновое изображение:

/ image.png

CSS: 

html, body { height: 100%; margin: 0px; }

.bg-image {
    width: 100%;
    height: 100%;
    background-image: url(image.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    text-indent: -9999px;
}

HTML: 

<body>
    <div class="bg-image">Some text not displayed</div>
</body>
0 голосов
/ 27 августа 2014

Существует очень простой кросс-браузерный метод автоматического изменения размера.Съемка изображения шириной 200 пикселей.Возьмите половину ширины и сделайте следующее: 

   #imgcent1 {
   left: calc (100% - 100px  /  2 );
   /*rest of code*/
   }

Убедитесь, что есть «пробел», чтобы избежать отрицательных и положительных чисел (лучше всего использовать это соглашение для всех операндов).Это будет автоматически изменять размер.Просто попробуйте и, надеюсь, тестирование в других браузерах обеспечит его соответствие стандарту.

0 голосов
/ 24 июня 2014

Я сделал это! Этот метод отлично работает и работает во всех основных браузерах. 

style="position: fixed; margin: 0 50%; left: -850px; right: 0; top: 0; bottom: 0;"

Я просто использовал левый угол на половину ширины изображения, а затем переместил его, используя поле. Работает угощение:)

0 голосов
/ 23 мая 2014 
.image {
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
 }
0 голосов
/ 17 февраля 2012

Решение: 

 .centeredImage {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: image-height/2;
      margin-left: image-width/2;
    }

с тех пор, как вы упомянули: 

 margin-top: -50px;
 margin-left: -150px;

И если его правильно выровнять по центру, то высота вашего изображения будет 50x2 = 100px; & ширина 150x2 = 300 пикселей;

0 голосов
/ 23 марта 2010

ясно: оба; поле: авто;

Страница:
...