There are 3 pictures, they need to be centered. All styles in html. Badly I understand it.

Here is the code:

<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>
  • @KillerFox, To format the code, select it with the mouse and click on the {} button of the editor. - Deonis
  • place here jsfiddle.net - soledar10
  • jsfiddle.net/22bwhm2o - soledar10

1 answer 1

text-align: center; if the image is set to display:block - then margin:0 auto;

http://jsfiddle.net/22bwhm2o/