Форум программистов, компьютерный форум CyberForum.ru
CyberForum.ru - форум программистов и сисадминов > >
Восстановить пароль Регистрация
 
VtaMC
Просто Веталь
153 / 93 / 1
Регистрация: 11.05.2009
Сообщений: 628
02.11.2009, 19:43     Расположение по центру в теге div   #1
Доброго времени суток!!!
Как установить все элементы в центр по вертикали и горизонтали, внутри тега div.

Пытался сделать так(в css):
Код Code
1
2
3
4
5
.div
{
   vertical-align: center;
   text-align: center;
}
Но элементы центруются только по горизонтали.
Заранее спасибо!!!
AdAgent
Объявления
02.11.2009, 19:43    Расположение по центру в теге div
FunDuck
Форумчанин
682 / 374 / 3
Регистрация: 22.01.2009
Сообщений: 1,135
02.11.2009, 19:51     Расположение по центру в теге div   #2
У vertical-align нет значения "center", есть "middle". Только это вряд ли поможет. Попробуй line-height:"высота блока".
VtaMC
Просто Веталь
153 / 93 / 1
Регистрация: 11.05.2009
Сообщений: 628
02.11.2009, 21:28  [ТС]     Расположение по центру в теге div   #3
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;
    
}
BlackApricot
Форумчанин
286 / 127 / 1
Регистрация: 15.02.2009
Сообщений: 520
03.11.2009, 11:19     Расположение по центру в теге div   #4
Если нельзя напрямую, попробуем наискось...

Можно так:
Код 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>
Vanstorm
Форумчанин
2770 / 335 / 4
Регистрация: 15.01.2008
Сообщений: 2,674
03.11.2009, 20:03     Расположение по центру в теге div   #5
Ну не знаю вот это
Код 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  
AdAgent
Объявления
03.11.2009, 20:03    Расположение по центру в теге div
BlackApricot
Форумчанин
286 / 127 / 1
Регистрация: 15.02.2009
Сообщений: 520
03.11.2009, 21:54     Расположение по центру в теге div   #6
Цитата Сообщение от Vanstorm Посмотреть сообщение
У меня работает на 3 браузерах. почему?
Не знаю, мои версии работают в пяти.
Vanstorm
Форумчанин
2770 / 335 / 4
Регистрация: 15.01.2008
Сообщений: 2,674
03.11.2009, 22:02     Расположение по центру в теге div   #7
BlackApricot,
на других я просто не проверял
это я к тому что вариант предложенный автором не так уж и плох.
VtaMC
Просто Веталь
153 / 93 / 1
Регистрация: 11.05.2009
Сообщений: 628
04.11.2009, 12:11  [ТС]     Расположение по центру в теге div   #8
Цитата Сообщение от 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>
Спасибо,но немного громоздко!
romchiksoad
Модератор
1919 / 764 / 30
Регистрация: 03.11.2009
Сообщений: 2,932
Записей в блоге: 2
04.11.2009, 16:22     Расположение по центру в теге div   #9
Код HTML5
1
div{text-align:center}
VtaMC
Просто Веталь
153 / 93 / 1
Регистрация: 11.05.2009
Сообщений: 628
04.11.2009, 18:27  [ТС]     Расположение по центру в теге div   #10
Цитата Сообщение от romchiksoad Посмотреть сообщение
Код HTML5
1
div{text-align:center}
Это просто центровка по горизонтали.
BlackApricot
Форумчанин
286 / 127 / 1
Регистрация: 15.02.2009
Сообщений: 520
04.11.2009, 18:31     Расположение по центру в теге div   #11
Цитата Сообщение от VtaMC Посмотреть сообщение
Спасибо,но немного громоздко!
Зато кроссбраузерно!
Сделай сам, сделай лучше нас.

Цитата Сообщение от romchiksoad Посмотреть сообщение
div{text-align:center}
А ты всё читал, с самого начала?
VtaMC
Просто Веталь
153 / 93 / 1
Регистрация: 11.05.2009
Сообщений: 628
04.11.2009, 18:41  [ТС]     Расположение по центру в теге div   #12
Сделал вариант с таблицей:
<table class="border"><td></table>
Работает везде, но не очень нравится... Ну ладно, просто я думал, что это можно как-то одним параметром осуществить, а так то на то и выходит - что таблицу использовать, что скрипты писать... Всем спасибо!!!

Добавлено через 1 минуту
Просто думал выйграть в плане производительности!

Добавлено через 2 минуты
Цитата Сообщение от BlackApricot Посмотреть сообщение
Цитата:
Сообщение от VtaMC
Спасибо,но немного громоздко!
Зато кроссбраузерно!
Сделай сам, сделай лучше нас.
Не я ничего не говорю, просто я думал всё решаемо одним параметром
romchiksoad
Модератор
1919 / 764 / 30
Регистрация: 03.11.2009
Сообщений: 2,932
Записей в блоге: 2
04.11.2009, 19:57     Расположение по центру в теге div   #13
Код HTML5
1
div{text-align:center;vertical-align:middle}
Другие значения:
baseline
sub
super
top-text
top
middle
bottom
bottom-text
процент %

нет,не всё)такое наверно уже было?
BlackApricot
Форумчанин
286 / 127 / 1
Регистрация: 15.02.2009
Сообщений: 520
05.11.2009, 07:17     Расположение по центру в теге div   #14
Цитата Сообщение от romchiksoad Посмотреть сообщение
нет,не всё)такое наверно уже было?
Не, не припоминаю, специфическая задача.
Посмотрим, что ты там накодил.
BlackApricot
Форумчанин
286 / 127 / 1
Регистрация: 15.02.2009
Сообщений: 520
05.11.2009, 18:24     Расположение по центру в теге div   #15
Цитата Сообщение от Vanstorm Посмотреть сообщение
<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>
Это не работает вообще, совсем.
line-height: вот это высота строки, то есть если дать текст, а не слово, то получаем полный бред. Расстояние между строк 319рх, ну и сколько таких строк уместится по высоте?????????

display: table-cell; этого нет вообще в моих книгах, выложи, что есть.

Итог плачевный.
Vanstorm
Форумчанин
2770 / 335 / 4
Регистрация: 15.01.2008
Сообщений: 2,674
05.11.2009, 19:49     Расположение по центру в теге div   #16
BlackApricot,
Код HTML5
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
<style>
.wrap {
display: table-cell;
vertical-align: middle;
text-align:center;
width: 501;
height: 401px;
border:solid;
}
.ieotstoy {
display: none;
width: 1px;
margin-left: -1px;
}
* html .ieotstoy, * html .valign-center {
display: inline-block;
vertical-align: middle;
}
* html .valign-center {
width: 100%;
}
* html .ieotstoy {
height: 100%;
}
* html .ieotstoy, * html .valign-center {
display: inline;
}
 
</style>
<div class="wrap">
<div class="valign-center">
<p>Text Text Text Text</p>
<p>teeeeeeexxxxxxxxxxxxxxxxxxxxxxxxxxxxxxttttttttttttttttttttttttt </p>
</div>
<div class="ieotstoy"></div>
</div>
найдено на просторах интернета....
Yandex
Объявления
05.11.2009, 19:49    Расположение по центру в теге div
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Ответ Создать новую тему
Опции темы

Текущее время: 19:23. Часовой пояс GMT +4.
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.7 PL3
Copyright ©2000 - 2014, vBulletin Solutions, Inc.