Как вставить изображение в документ, не используя таблицу?
Друзья! То есть я щас чтобы вставить картинку куда-нибудь в центр документа, должен создавать таблицу 3X3 и в среднюю ячейку помещать эту картинку.
Это вообще-то как-то не укладывается у меня в голове. Согласитесь, для определения координат картинки по большому счёту надо две цифры всего: Допустим, координаты верхнего левого угла. Всё! ЕСть какой-нибудь способ? Может, я малочитал, не знаю. ТОгда, если мы захотим двигать картинку по экрану это будет просто. Изменяем ординату, допустим, и картинка движется. Много проще, чем вот в этом МОЁМ коде. (Движение картинки) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Шаблон</title> <script> i= 0; setInterval("f()", 40) // shirina= table.getElementsByTagName("tr")[0].getElementsByTagName("th")[0].width function f () { i++ //Это ширина первого столбца первой ячейки, её и меняем. shir= i+"%" var table= document.getElementById("tablitsa") table.getElementsByTagName("tr")[0].getElementsByTagName("th")[0].width= shir // shirina= "75%"; } </script> </head> <body onload="f()"> <table width="100%" border="0" id="tablitsa"> <tr> <th width="14%" height="69" scope="row"> </th> <td width="11%"> </td> <td width="75%"> </td> </tr> <tr> <th height="98" scope="row"> </th> <td><img src="file:///C|/Documents and Settings/ser/Рабочий стол/eee_1.jpeg" width="128" height="96" /></td> <td> </td> </tr> <tr> <th height="167" scope="row"> </th> <td> </td> <td> </td> </tr> </table> <p> </p> </body> </html> Собсно,тут всё понятно, через каждые 40 мс вызывается функция, меняющая ширину первого столбца (хотелось бы, повторюсь: абсциссу верхнего левого угла) и картинка движется. КАртинка должна быть 148 на 96 пикселей. |
Возможно, Вам пригодится запись из моего бложика.
Другой способ, без выдёргивания элемента из потока. У любого элемента с display: table-cell есть вертикальное выравнивание. Делаем таблицу на любой размер (хоть 100% экрана), внутри нее одну ячейку, у ячейки vertical-align: middle; text-align: center Вставляем туда что угодно (кроме флоатов), и это что угодно центруется. Если Вам не важен ie6, display: table-cell можно задать даже body (именно так центруются картинки в опере, когда они открыты отдельно :) ). UPD: На расположение блоков text-align: center не распространиется, им нужно задавать: margin-left: auto; margin-right: auto; |
Часовой пояс GMT +3, время: 07:42. |