Форум программистов, компьютерный форум CyberForum.ru Форум программистов | Компьютерный форум | Форум web-программистов | Форум по электронике и бытовой технике | Форум о софте | Научный форум | Карьера и бизнес
CyberForum.ru - форум программистов и сисадминов > Форум Форум web-программистов > Форум HTML, CSS
Восстановить пароль Регистрация

Ответ Создать новую тему
 
02.11.2009, 19:43   #1
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:43
AdAgent
Объявления
02.11.2009, 19:51   #2
FunDuck
Форумчанин
 
Регистрация: 22.01.2009
Сообщений: 1,135
Репутация: 681 (373)
Лучшие ответы: 3
Расположение по центру в теге div

У vertical-align нет значения "center", есть "middle". Только это вряд ли поможет. Попробуй line-height:"высота блока".
Другие темы раздела
не могу ни как исправить одну деталь в шаблоне! (блоки) HTML, CSS
http://s59.***********/i164/0911/6b/186107b40468t.jpg скачать шаблон или код ниже: <html> <head> <title>Untitled Document</title>
Как исправить ошибку ? HTML, CSS
Сматрите рисунак, никак немагу попасть на свой сайт.
02.11.2009, 21:28  [ТС]   #3
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
AdAgent
Объявления
03.11.2009, 20:03   #5
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
Форумчанин
 
Регистрация: 15.01.2008
Сообщений: 2,674
Репутация: 2769 (334)
Лучшие ответы: 4
Расположение по центру в теге div

BlackApricot,
на других я просто не проверял
это я к тому что вариант предложенный автором не так уж и плох.
04.11.2009, 12:11  [ТС]   #8
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
Модератор
 
Регистрация: 03.11.2009
Сообщений: 2,913
Репутация: 1907 (752)
Записей в блоге: 2
Лучшие ответы: 28
Расположение по центру в теге div

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

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

Похожие темы
Тема Раздел Автор Дата
Как в теге li с высотой в 35px сделать ссылку с текстом по центру?
Как в теге li с высотой в 35px сделать ссылку с текстом по вертикали слева по середине или же снизу? <ul> <li class="css"><a href="#">Текст</a></li> </ul> .css{
HTML, CSS devid134 04.05.2014 01:29
Расположение блоков по всему блоку по центру
Здравствуйте. у меня возникла проблема. мне нужно расположить блоки по центру, так, чтобы они имели отступы друг от друга, при этом нужно сделать, чтобы отступы подстраивались под разрешение экрана. я взял скрипт masorny, который делает их плавающими, но нужно их по центру расположить. помогите...
HTML, CSS pascal_user 16.03.2014 18:34
Как наложить один DIV на другой DIV (чтобы он был по центру)
Попытаюсь сформулировать свой вопрос (сразу говорю в начале посмотрите на скриншот который внизу). И так приступили, создаю <div> но создается либо выше либо ниже другого <Div> мне надо чтобы он был. точне чтобы он лежал сразу на двух дивах. И чтобы не с краю и не вцентре а чуть правее центра...
HTML, CSS brahmanchikkk 26.12.2013 18:08
Расположение картинки по центру
Я новичок в этом деле. Прошу помочь разобраться,если не сложно написать код,который расположил бы картинку по центру горизонтально и вертикально,не зависимо от размера окна браузера.Заранее благодарю:)
HTML, CSS Мурат777 06.09.2013 15:09
расположение содержимого сайта по центру
как расположить содержимое по центру: ...<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...
JavaScript outoftime 20.08.2009 13:04
Опции темы

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

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