Расположение элемента по центру страницы
Статьи → Дизайн и версткаДано: Элемент с заранее известными размерами.
Требуется: Поместить данный элемент ровно по центру HTML-страницы, используя при этом как можно меньше кода (HTML, CSS, JavaScript).
Решения:
1. Классика
<table width=100% height=100% border=0 cellpadding=0 cellspacing=0>
<tr valign= «center» align= «center»><td>
<img width= «100» height= «100» src= «pict.jpg» border= «0»>
</td></tr></table>
2. Java
<html>
<script>
function re (){
im=document.getElementById ( «img»);
imoP=im.offsetParent;
im.style.top= (imoP.offsetHeight-100)/2;
im.style.left= (imoP.offsetWidth-100)/2;
}
</script>
<body onload='re ();' onresize='re ();'>
<img id=img src=karat-e.jpg style='position:absolute;left:0;top:0;height:100;width:100'>
</body>
</html>
3. Изящный
<html><body><img src= «a.jpg» style= «position: absolute; top: 50%; left: 50%; margin: -50px 0 0 -50px; „/></body></html>
В случае составного изображения или комплекса — используем слои:
<div style=„position: absolute; top: 50%; left: 50%; margin: -180px 0 0 -320px;„>
<table width=„640“ border= «0“ cellpadding= «0“ cellspacing= «0“>
<tr>
…
</tr>
</table>
</div>
<div style= «position: absolute; top: 100%; left: 0%; margin: -77px 0 0 0; «>
….
</div>
21.08.2008, 5420 просмотров.