HTML CSS шпаргалка Рецепты, статьи, советы, приемы html css

«
»

Выравнивание блока по центру произвольной ширины

Как вы знаете, чтобы выровнить блок по центру с фиксированной шириной, нужно написать свойство margin:0 auto. Но что делать, если ширина блока произвольная? Ответ вы сейчас узнаете.

Итак, чтобы выровнить блок произвольной ширины по центру по горизонтали, нужно сделать следующее:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Выравниваем блок по центру</title>
<style type="text/css">
.container {
	position: relative;
	width: 100%;
	border:1px dotted #F00;
}
.container:after {
	content: '';
	display: block;
	clear: both;
}
.blockCenter {
	position: relative;
	right: 50%;
	float: right;
}
.center {
	position: relative;
	z-index: 1;
	right: -50%;
	border:1px dotted #060;
}
</style>
</head>
<body>
<div class="container">
  <p>Приведенный ниже блок будет находиться по центру и растягиваться относительно контента</p>
  <div class="blockCenter">
    <div class="center"> Ширина этого блока зависит от контента </div>
  </div>
</div>
</body>
</html>

Метки: ,

Запись опубликована 13.09.2009 в 18:41 и размещена в рубрике css. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.

Комментарии (3) на “Выравнивание блока по центру произвольной ширины”

  • Аанг:
    01.07.2010 в 22:22

    В IE6 совсем не работает. Даже текст не отображается.

  • Владимир:
    11.09.2010 в 18:56

    Рецепт хорош, но не все так гладко. На практике в такие блоки нужно вставлять не просто текст, а, например, меню. В этом случае в IE6 (будь он неладен) блок съезжает к левому краю. Чтобы исправить этот недостаток код нужно немного переписать. Привожу конкретный пример, работающий во всех браузерах:

    Пункт меню
    Пункт меню
    Пункт меню
    Пункт меню
    Пункт меню

    Для такого варианта стили будут следующими:

    .topmenu {
    height: 88px;
    position: relative;
    width: 100%;
    }
    .center_box {
    position: relative;
    right: 50%;
    float: right;
    }

    #top_header_menu {
    list-style-type: none;
    overflow: hidden;
    height: 48px;
    position: relative;
    left: 50%;
    }

    #top_header_menu li {
    display: block;
    height: 44px;
    float: left;
    padding-right: 3px;
    padding-left: 2px;
    }
    #top_header_menu li a {
    display: block;
    padding-right: 12px;
    padding-left: 12px;
    height: 44px;
    line-height: 44px;
    float: left;
    }

    #top_header_menu li span {
    display: block;
    color: #F59F0A;
    padding-right: 12px;
    padding-left: 12px;
    height: 44px;
    line-height: 44px;
    float: left;
    }

    Для IE6 нужно дополнительно прописать правило:
    #top_header_menu {
    float: left;
    }

    В результате получаем меню, центрированное по центру блока, ширина которого будет меняться.

  • Сергей:
    24.08.2011 в 02:35

    проще center поставить по бокам

Оставить комментарий

Для вставки кода используйте <code> ... </code>.



Самые комментируемые

Облако тегов

Нет тегов найденных по заданным критериям.

Опрос