<img style="display:block; width:100px; margin: 10px auto" src="URL_de_l_image" alt="Une description de l'image" width="720px" height="540px"></img>Оскільки тег <img /> , не дивлячись на те, що зображення має ширину і довжину, є тегом стрічкового типу (in-line), то щоб перетворити його на блоковий елемент, використовуємо властивість display із значенням block. Дехто рекомендує додатково задати властивість width, щоб браузер мав дані для визначення полів (margin). Але у мене працювало і без цього. Остання властивість margin із значенням auto якраз і буде відповідати за центрування. Якщо margin записана в скороченому вигляді, замість детальних записів margin-top, margin-bottom, margin-right, margin-left, то перше значення (10px) задасть відступи від блоку до сусідніх елементів вгорі та внизу, а друге - відступи справа та зліва. Значення auto - буде центрувати зображення.
Цей код може не працювати в старих версіях IE, тому до купи можна додати text-align:center.
В старіших версіях HTML для центрування зображення використовували властивість align="middle" (значення center не працює для зображень). Або align="center" в батьківському блоковому елементі, який містить тег <img />:
<p align="center"><img src="imgName.gif" alt="image description" height="100" width="100"></p>Або і просто тег <center> :
<center><img src="imgName.gif" alt="image description" height="100" width="100"></center>Але у версії HTML 4.01 ці властивості позначені як застарілі (deprecated), тому краще обходитися без них.
Прочитане по цій темі:
learnlayout.com
www.netmechanic.com
christian-fei.com
www.webmasterworld.com
www.emailonacid.com
css.mammouthland.net
www.techehow.com
stackoverflow.com
www.html.net
www.webdeveloper.com
www.commentcamarche.net
thanks for this information...
ВідповістиВидалитиFmovies Proxy sites
Techwiki
CSS Layout - margin Horizontal Align
ВідповістиВидалити