Публикуване на July 23, 2009 - от admin
Центриране на елементи
В тази статия ще опиша един от вариантите за центриране на елементи.Първия пример , който ще разгледаме е за центрирането на сайт . В моя пример ще центрирам div с черна рамка посредатата на страница.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Центриране на див посредата на страница</title>
<style type="text/css">
#cont{border:1px solid black;width:500px;height: 500px;}
</style>
</head>
<body>
<div id="cont"></div>
</body>
</html>
Това което искаме да направим е да позиционираме div с id cont посредата на страницата.Сложил съм и height:500px за да може да се види по-добре в демото.
Това което трябва да получите е това.Следващата стъпка е да позиционираме елемента.Това се прави с margin:0 auto;.Слагаме margin:0 auto; при #cont в css-а.
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Центриране на див посредата на страница</title>
<style type="text/css">
#cont{border:1px solid black;width:500px;height: 500px;margin:0 auto;}
</style>
</head>
<body>
<div id="cont"></div>
</body>
</html>
За да работи това обаче кода ви трябва да е обявен като xhtml.А това става чрез doctype.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
. Ако кода ви не е xhtml , просто дива няма да се центрира.
Ето го и резултата.
Тази статия е публикувана на Thursday, July 23rd, 2009 at 6:53 am и е прибавена в категория CSS хакове. Можеш да се абонираш за нови статии от тук.
