Расположение по центру в теге div

VtaMC · 02.11.2009, 19:43

Доброго времени суток!!!
Как установить все элементы в центр по вертикали и горизонтали, внутри тега div.

Пытался сделать так(в css):

Код Code

.div
{
   vertical-align: center;
   text-align: center;
}

Но элементы центруются только по горизонтали.
Заранее спасибо!!!

FunDuck · 02.11.2009, 19:51

У vertical-align нет значения "center", есть "middle". Только это вряд ли поможет. Попробуй line-height:"высота блока".

VtaMC · 02.11.2009, 21:28 **[ТС]**

vertical-align: middle - помог, но только в Google Chrome, в IE8 ни в какую... line-height - тоже не помог.
Вот полностью код css:

Код Code

 
.border
{
    width: 323px;
    height: 319px;
    background-image: url('widget_bg.png');
    text-align: center;
    display: table-cell;
    vertical-align:middle;
    line-height: 319px;
    
}

BlackApricot · 03.11.2009, 11:19

Если нельзя напрямую, попробуем наискось...

Можно так:

Код HTML

<div style="background:#ccc; width:100%; height:111px;">
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"><tr><td align="center" valign="middle">
Текст в центре
</td></tr></table></div>

Или так:

Код HTML

<div style="background:#ccc; width:100%; height:111px; text-align:center;">
<div style="padding:45px 0 0 0;">
Текст в центре
</div></div>

Или так:

Код HTML

<div style="background:#ccc; width:100%; height:111px; text-align:center;" id="heigh">
<div id="paddin" style="padding:0;">
Текст в центре
</div></div>
<script type="text/javascript"><!--
document.getElementById("paddin").style.paddingTop=
Math.round(parseInt(document.getElementById("heigh").style.height)/2)-10+"px";
--></script>

Vanstorm · 03.11.2009, 20:03

Ну не знаю вот это

Код HTML

<style>
.border
{
    width: 323px;
    height: 319px;
    background-image: url('widget_bg.png');
    text-align: center;
    display: table-cell;
    vertical-align:middle;
    line-height: 319px;
    border:1px solid;
    
}
</style>
<div class="border">ihk</div>

У меня работает на 3 браузерах. почему?

BlackApricot · 03.11.2009, 21:54

Сообщение от Vanstorm

У меня работает на 3 браузерах. почему?

Не знаю, мои версии работают в пяти.

Vanstorm · 03.11.2009, 22:02

BlackApricot,
на других я просто не проверял

это я к тому что вариант предложенный автором не так уж и плох.

VtaMC · 04.11.2009, 12:11 **[ТС]**

Сообщение от Vanstorm

Ну не знаю вот это

Код HTML

<style>
.border
{
    width: 323px;
    height: 319px;
    background-image: url('widget_bg.png');
    text-align: center;
    display: table-cell;
    vertical-align:middle;
    line-height: 319px;
    border:1px solid;
    
}
</style>
<div class="border">ihk</div>

У меня работает на 3 браузерах. почему?

У меня работает на Google Chrome Mozilla, а на IE нет...

Добавлено через 2 минуты

Сообщение от BlackApricot

Если нельзя напрямую, попробуем наискось...

Можно так:

Код HTML

<div style="background:#ccc; width:100%; height:111px;">
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0"><tr><td align="center" valign="middle">
Текст в центре
</td></tr></table></div>

Или так:

Код HTML

<div style="background:#ccc; width:100%; height:111px; text-align:center;">
<div style="padding:45px 0 0 0;">
Текст в центре
</div></div>

Или так:

Код HTML

<div style="background:#ccc; width:100%; height:111px; text-align:center;" id="heigh">
<div id="paddin" style="padding:0;">
Текст в центре
</div></div>
<script type="text/javascript"><!--
document.getElementById("paddin").style.paddingTop=
Math.round(parseInt(document.getElementById("heigh").style.height)/2)-10+"px";
--></script>

Спасибо,но немного громоздко!

romchiksoad · 04.11.2009, 16:22

Код HTML

1	div{text-align:center}

VtaMC · 04.11.2009, 18:27 **[ТС]**

Сообщение от romchiksoad

Код HTML

1	div{text-align:center}

Это просто центровка по горизонтали.

Другие темы раздела	Форум верстальщиков. Обсуждение языка разметки HTML и каскадных таблиц стилей CSS. Верстка страниц.
не могу ни как исправить одну деталь в шаблоне! (блоки) html http://s59.radikal.ru/i164/0911/6b/186107b40468t.jpg скачать шаблон или код ниже: <html> <head> <title>Untitled Document</title>. не могу ни как исправить одну деталь в шаблоне! (блоки)	Как исправить ошибку ? html Сматрите рисунак, никак немагу попасть на свой сайт.. Как исправить ошибку ?

02.11.2009, 19:51	#2
FunDuck Форумчанин Регистрация: 22.01.2009 Сообщений: 1,139 Репутация: 676 (368)	Re: Расположение по центру в теге div У vertical-align нет значения "center", есть "middle". Только это вряд ли поможет. Попробуй line-height:"высота блока".

03.11.2009, 21:54	#6
BlackApricot Форумчанин Регистрация: 15.02.2009 Сообщений: 520 Репутация: 284 (125)	Re: Расположение по центру в теге div Сообщение от Vanstorm У меня работает на 3 браузерах. почему? Не знаю, мои версии работают в пяти.

03.11.2009, 22:02	#7
Vanstorm Форумчанин Регистрация: 15.01.2008 Адрес: Киберпространство Сообщений: 2,712 Репутация: 2762 (327)	Re: Расположение по центру в теге div BlackApricot, на других я просто не проверял это я к тому что вариант предложенный автором не так уж и плох.

Похожие темы
Тема	Автор
HTML, CSS Резиновый div по центру Есть таблица, состоящая из трёх ячеек, боковые ячейки фиксированной ширины. В центральной ячейке есть блок div (синий), он должен быть расположен по центру (margin: 0 auto) Можно ли сделать так, чтобы при растяжении таблицы (например, сайт открыли на большом широком мониторе) блок тоже...	flexdiez49
HTML, CSS Расположение активных кнопок меню по центру Не получается расположить две активные картинки по центру и чтобы они обе работали как гиперссылка. Код html <!DOCTYPE html> <html> <head> <meta content="text/html" charset="utf=8"> <title>Поселок</title> <link rel="stylesheet" media="screen" type="text/css" title="Style"...	Chris
C++ Builder расположение элементов формы по центру (не зависимо от диагонали экрана) при запуске форма раскрывается на весь экран (WindowState->wsMaximized), а элементы скромно остаются на своих местах в сторонке. как их оживить?) может сделать групбох и все туда содержимое поместить?	for_sunny
HTML, CSS Div по центру Здравствуйте! Снова я. Как сделать слайдшоу по центру страницы? Раньше с помощью div align получалось как-то, но забыл куда именно вставлял div align, по-моему его нужно вставить перед самым первым div в теле страницы, пробовал, но слайдшоу не "центрируется"	nopasaran
JavaScript расположение содержимого сайта по центру как расположить содержимое по центру: ...<div id="wrap"> <div id="header"><h1>Page 1</h1></div> <div id="menu"> <hr> <a href="index.html">Home page</a> \| <a href="Page1.html"><b>Page 1</b></a> \| <a href="Page2.html">Page 2</a> \| <a href="Sitemap.html">Sitemap</a> \| <a...	outoftime

Опции темы	Поиск в этой теме
	Поиск в этой теме: Расширенный поиск
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид