середа, 6 березня 2013 р.

XHTML: як центрувати зображення?

     Один із методів центрування зображення в html-документі:

<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.