WEBSET - разработки для Интернет

CSS - центрирование слоя по центру экрана

28 августа 2007 | CSS и HTML | распечатать | просмотров: 20858
 (Голосов: 7)

Многие стыкаются с проблемой разместить по центру экрана определенный объект, очень часто возникают проблемы совместимости сделочного с различными браузерами.

Размещение слоя по центру на самом деле не представляет сложности. Вот пример размещения прямоугольника 300х200 по центру.

style="color: #000000"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Пример центрования слоя</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<style type="text/css" media="all">
.block
{
   positionabsolute;  
   overflowauto;  
   width: 300px;  
   height: 200px; 
   left: 50%;  
   top: 50%;  
   margin-left: -150px;  
   margin-top: -100px;  
   background: #C0DCC0;  
}
</style>

</head>
<body> <div class="block">   Текст...   </div></body>
</html>

Здесь нужно особое внимание обратить на:

style="color: #000000"> margin-left: -150px;  
margin-top: -100px; 

150 и 100 это размер половины слоя, что центрируется. Если размер слоя будет изменен, то и эти величины нужно изменить.

Если Вам потребуется отцентрировать что-то внутри отцентрированного слоя, это можно сделать так:

style="color: #000000"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Пример центрования слоя</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css" media="all">
.block
{
   positionabsolute;  
   overflowauto;  
   width: 300px;  
   height: 200px; 
   left: 50%;  
   top: 50%;  
   margin-left: -150px;  
   margin-top: -100px;  
   background: #C0DCC0;  
}
.content
{
   positionrelative;  */а выа вы*/
   overflowauto; 
   width: 150px; 
   height: 100px; 
   left: 75px;  //првпарва
   top: 50px; 
   background: #FFE8BB; 
}
</style>

</head>
<body><div class="block"><div class="content"> Текст... </div></div></body>
</html>

Партнеры:

Все про современный бодибилдинг, бизнес и финансы, энергетика Украины, Сайт про Стюарта МакРоберта, Интернет-магазин ноутбуков Absolut UA.

Реклама:

Доставка, строите или делаете ремонт на ванны акриловые киев.

© 2007 WEBSET
При использовании материалов сайта ссылка на источник обязательна.
Работает на базе CMS 2z project