Видео уроци за PHP , Jquery , CSS и още нещо!

Архив ‘CSS хакове’


Публикувана на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 , просто дива няма да се центрира.
Ето го и резултата.