Расположение элемента по центру страницы

Статьи Дизайн и верстка

Дано: Элемент с заранее известными размерами.
Требуется: Поместить данный элемент ровно по центру 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>

htmlCSSJavaScript 

21.08.2008, 4278 просмотров.