Форум программистов, компьютерный форум CyberForum.ru
CyberForum.ru - форум программистов и сисадминов > >
Восстановить пароль Регистрация

Ответ Создать новую тему
 
VtaMC
Просто Веталь
153 / 93 / 1
Регистрация: 11.05.2009
Сообщений: 627
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
FunDuck
Форумчанин
682 / 374 / 3
Регистрация: 22.01.2009
Сообщений: 1,135
02.11.2009, 19:51
  #2
У vertical-align нет значения "center", есть "middle". Только это вряд ли поможет. Попробуй line-height:"высота блока".
VtaMC
Просто Веталь
153 / 93 / 1
Регистрация: 11.05.2009
Сообщений: 627
02.11.2009, 21:28  [ТС]
  #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
  #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
Форумчанин
2769 / 334 / 4
Регистрация: 15.01.2008
Сообщений: 2,674
03.11.2009, 20:03
  #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  
BlackApricot
Форумчанин
286 / 127 / 1
Регистрация: 15.02.2009
Сообщений: 520
03.11.2009, 21:54
  #6
Цитата Сообщение от Vanstorm Посмотреть сообщение
У меня работает на 3 браузерах. почему?
Не знаю, мои версии работают в пяти.
Vanstorm
Форумчанин
2769 / 334 / 4
Регистрация: 15.01.2008
Сообщений: 2,674
03.11.2009, 22:02
  #7
BlackApricot,
на других я просто не проверял
это я к тому что вариант предложенный автором не так уж и плох.
VtaMC
Просто Веталь
153 / 93 / 1
Регистрация: 11.05.2009
Сообщений: 627
04.11.2009, 12:11  [ТС]
  #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
  #9
Код HTML5
1
div{text-align:center}
VtaMC
Просто Веталь
153 / 93 / 1
Регистрация: 11.05.2009
Сообщений: 627
04.11.2009, 18:27  [ТС]
  #10
Цитата Сообщение от romchiksoad Посмотреть сообщение
Код HTML5
1
div{text-align:center}
Это просто центровка по горизонтали.
BlackApricot
Форумчанин
286 / 127 / 1
Регистрация: 15.02.2009
Сообщений: 520
04.11.2009, 18:31
  #11
Цитата Сообщение от VtaMC Посмотреть сообщение
Спасибо,но немного громоздко!
Зато кроссбраузерно!
Сделай сам, сделай лучше нас.

Цитата Сообщение от romchiksoad Посмотреть сообщение
div{text-align:center}
А ты всё читал, с самого начала?
VtaMC
Просто Веталь
153 / 93 / 1
Регистрация: 11.05.2009
Сообщений: 627
04.11.2009, 18:41  [ТС]
  #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
  #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
  #14
Цитата Сообщение от romchiksoad Посмотреть сообщение
нет,не всё)такое наверно уже было?
Не, не припоминаю, специфическая задача.
Посмотрим, что ты там накодил.
BlackApricot
Форумчанин
286 / 127 / 1
Регистрация: 15.02.2009
Сообщений: 520
05.11.2009, 18:24
  #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
Форумчанин
2769 / 334 / 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
После регистрации реклама в сообщениях будет скрыта и будут доступны все возможности форума.
Ответ Создать новую тему

Похожие темы
Тема Раздел Ответов Автор Дата
HTML, CSS Как в теге li с высотой в 35px сделать ссылку с текстом по центру?
Как в теге li с высотой в 35px сделать ссылку с текстом по вертикали слева по середине или же снизу? <ul> <li class="css"><a href="#">Текст</a></li> </ul> .css{
HTML, CSS 2 devid134 04.05.2014 01:29
HTML, CSS Расположение блоков по всему блоку по центру
Здравствуйте. у меня возникла проблема. мне нужно расположить блоки по центру, так, чтобы они имели отступы друг от друга, при этом нужно сделать, чтобы отступы подстраивались под разрешение экрана....
HTML, CSS 2 pascal_user 16.03.2014 18:34
HTML, CSS Можно ли писать текст прямо в теге div и будет ли эта вёрстка валидной с точки зрения HTML5
вроде как div предназначены только для вёрстки а для текста есть p...
HTML, CSS 2 Platinumix 31.12.2013 18:51
HTML, CSS Как наложить один DIV на другой DIV (чтобы он был по центру)
Попытаюсь сформулировать свой вопрос (сразу говорю в начале посмотрите на скриншот который внизу). И так приступили, создаю <div> но создается либо выше либо ниже другого <Div> мне надо чтобы он...
HTML, CSS 4 brahmanchikkk 26.12.2013 18:08
HTML, CSS Расположение блока по центру по вертикали для IE
#content { display: block; margin: 0 auto; height: 100%; width: 800px; } В IE не по центру располагается.
HTML, CSS 6 Alex9 22.09.2013 17:31
HTML, CSS Расположение картинки по центру
Я новичок в этом деле. Прошу помочь разобраться,если не сложно написать код,который расположил бы картинку по центру горизонтально и вертикально,не зависимо от размера окна браузера.Заранее...
HTML, CSS 7 Мурат777 06.09.2013 15:09
HTML, CSS Расположение активных кнопок меню по центру
Не получается расположить две активные картинки по центру и чтобы они обе работали как гиперссылка. Код html <!DOCTYPE html> <html> <head> <meta content="text/html" charset="utf=8">...
HTML, CSS 6 Chris 19.01.2012 23:14
HTML, CSS Div по центру
Здравствуйте! Снова я. Как сделать слайдшоу по центру страницы? Раньше с помощью div align получалось как-то, но забыл куда именно вставлял div align, по-моему его нужно вставить перед самым первым...
HTML, CSS 2 nopasaran 03.07.2011 14:07
Опции темы

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