Форум программистов и сисадминов CyberForum.ru
Вернуться   Форум программистов и сисадминов CyberForum.ru > Форум Форум web-программистов > Форум HTML, CSS
Восстановить пароль Регистрация

Ответ Создать новую тему
 
Старый 02.11.2009, 19:43   #1
VtaMC
Просто Веталь
 
Аватар для VtaMC
 
Регистрация: 11.05.2009
Сообщений: 627
Репутация: 153 (93)
Лучшие ответы: 1
Расположение по центру в теге div / HTML, CSS

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

Пытался сделать так(в css):
Код Code
1
2
3
4
5
.div
{
   vertical-align: center;
   text-align: center;
}
Но элементы центруются только по горизонтали.
Заранее спасибо!!!
Старый 02.11.2009, 19:51   #2
FunDuck
Форумчанин
 
Регистрация: 22.01.2009
Сообщений: 1,135
Репутация: 679 (371)
Лучшие ответы: 3
Расположение по центру в теге div

У vertical-align нет значения "center", есть "middle". Только это вряд ли поможет. Попробуй line-height:"высота блока".
Другие темы раздела Форум HTML, CSS. Обсуждение языка разметки HTML и каскадных таблиц стилей CSS. Верстка страниц.
не могу ни как исправить одну деталь в шаблоне! (блоки) HTML, CSS
http://s59.***********/i164/0911/6b/186107b40468t.jpg скачать шаблон или код ниже: <html> <head> <title>Untitled Document</title>
Как исправить ошибку ? HTML, CSS
Сматрите рисунак, никак немагу попасть на свой сайт.
Старый 02.11.2009, 21:28  [ТС]   #3
VtaMC
Просто Веталь
 
Аватар для VtaMC
 
Регистрация: 11.05.2009
Сообщений: 627
Репутация: 153 (93)
Лучшие ответы: 1
Расположение по центру в теге div

vertical-align: middle - помог, но только в Google Chrome, в IE8 ни в какую... line-height - тоже не помог.
Вот полностью код css:
Код Code
1
2
3
4
5
6
7
8
9
10
11
.border
{
    width: 323px;
    height: 319px;
    background-image: url('widget_bg.png');
    text-align: center;
    display: table-cell;
    vertical-align:middle;
    line-height: 319px;
    
}
Старый 03.11.2009, 11:19   #4
BlackApricot
Форумчанин
 
Регистрация: 15.02.2009
Сообщений: 520
Репутация: 286 (127)
Лучшие ответы: 1
Расположение по центру в теге div

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

Можно так:
Код HTML5
1
2
3
4
<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>
Или так:
Код HTML5
1
2
3
4
<div style="background:#ccc; width:100%; height:111px; text-align:center;">
<div style="padding:45px 0 0 0;">
Текст в центре
</div></div>
Или так:
Код HTML5
1
2
3
4
5
6
7
8
<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>
Старый 03.11.2009, 11:19
Google
Объявления
Старый 03.11.2009, 20:03   #5
Vanstorm
Форумчанин
 
Аватар для Vanstorm
 
Регистрация: 15.01.2008
Сообщений: 2,674
Репутация: 2769 (334)
Лучшие ответы: 4
Расположение по центру в теге div

Ну не знаю вот это
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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 браузерах. почему?
Миниатюры
Расположение по центру в теге div  
Старый 03.11.2009, 21:54   #6
BlackApricot
Форумчанин
 
Регистрация: 15.02.2009
Сообщений: 520
Репутация: 286 (127)
Лучшие ответы: 1
Расположение по центру в теге div

Цитата Сообщение от Vanstorm Посмотреть сообщение
У меня работает на 3 браузерах. почему?
Не знаю, мои версии работают в пяти.
Старый 03.11.2009, 22:02   #7
Vanstorm
Форумчанин
 
Аватар для Vanstorm
 
Регистрация: 15.01.2008
Сообщений: 2,674
Репутация: 2769 (334)
Лучшие ответы: 4
Расположение по центру в теге div

BlackApricot,
на других я просто не проверял
это я к тому что вариант предложенный автором не так уж и плох.
Старый 04.11.2009, 12:11  [ТС]   #8
VtaMC
Просто Веталь
 
Аватар для VtaMC
 
Регистрация: 11.05.2009
Сообщений: 627
Репутация: 153 (93)
Лучшие ответы: 1
Расположение по центру в теге div

Цитата Сообщение от Vanstorm Посмотреть сообщение
Ну не знаю вот это
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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 Посмотреть сообщение
Если нельзя напрямую, попробуем наискось...

Можно так:
Код HTML5
1
2
3
4
<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>
Или так:
Код HTML5
1
2
3
4
<div style="background:#ccc; width:100%; height:111px; text-align:center;">
<div style="padding:45px 0 0 0;">
Текст в центре
</div></div>
Или так:
Код HTML5
1
2
3
4
5
6
7
8
<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>
Спасибо,но немного громоздко!
Старый 04.11.2009, 16:22   #9
romchiksoad
Модератор
 
Аватар для romchiksoad
 
Регистрация: 03.11.2009
Сообщений: 2,575
Репутация: 1827 (672)
Записей в блоге: 2
Лучшие ответы: 12
Расположение по центру в теге div

Код HTML5
1
div{text-align:center}
Старый 04.11.2009, 18:27  [ТС]   #10
VtaMC
Просто Веталь
 
Аватар для VtaMC
 
Регистрация: 11.05.2009
Сообщений: 627
Репутация: 153 (93)
Лучшие ответы: 1
Расположение по центру в теге div / HTML, CSS

Цитата Сообщение от romchiksoad Посмотреть сообщение
Код HTML5
1
div{text-align:center}
Это просто центровка по горизонтали.
Старый 04.11.2009, 18:27
Yandex
Объявления
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Ответ Создать новую тему

Похожие темы
Тема Автор
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
Опции темы

Текущее время: 22:43. Часовой пояс GMT +4.

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.7 PL3
Copyright ©2000 - 2014, vBulletin Solutions, Inc.