Как центрировать картинки html?

Рейтинг: 0Ответов: 1Опубликовано: 06.02.2015

Есть 3 картинки, их нужно центрировать. Все стили в html. Плохо в этом разбираюсь.

Вот код:

<style type="text/css">
   A.rollover {
    background: url(img/card4.png); / Путь к файлу с исходным рисунком  /
 background-position: right bottom; / Положение фона /
 float:left;
    display: block ; /  Рисунок как блочный элемент /
 margin: 0 auto;
    width: 400px; / Ширина рисунка /
    height: 200px; /  Высота рисунка /
   }
   A.rollover:hover {
    background: url(img/standart.png); / Путь к файлу с заменяемым рисунком  /
   }
  </style>
 </head>
 <body>
  <p><a  href="example178_1.html" class="rollover"> </a></p>
  </body>
  <style type="text/css">
   A.rollover2 {
    background: url(img/card3.png); / Путь к файлу с исходным рисунком  /
 text-align: center; / Выравнивание по центру /
 float:left;
    display: block ; /  Рисунок как блочный элемент /
     width: 400px; / Ширина рисунка /
    height: 200px; /  Высота рисунка /

   }
   A.rollover2:hover {
    background: url(img/premium.png); / Путь к файлу с заменяемым рисунком  /
   }
  </style>
 <body>
  <p><a  href="example178_1.html" class="rollover2"> </a></p>
   <style type="text/css">
   A.rollover3 {
    background: url(img/card5.png); / Путь к файлу с исходным рисунком  /
 float:left;
    display: block ; /  Рисунок как блочный элемент /
     width: 400px; / Ширина рисунка /
    height: 200px; /  Высота рисунка /
 <div align="center">

   }
   A.rollover3:hover {
    background: url(img/silver.png); / Путь к файлу с заменяемым рисунком  /
   }
  </style>
 <body>
  <p><a  href="example178_1.html" class="rollover3"> </a></p></center>
  </body>
html изображения
Источник: Stack Overflow на русском

Ответы

▲ 1

text-align: center; если изображению задано display:block - тогда margin:0 auto;

http://jsfiddle.net/22bwhm2o/