Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
 
Рейтинг: Рейтинг темы: голосов - 500, средняя оценка - 4.97
VtaMC
Просто Веталь
160 / 100 / 5
Регистрация: 11.05.2009
Сообщений: 628
#1

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

02.11.2009, 19:43. Просмотров 65909. Ответов 16
Метки нет (Все метки)

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

Пытался сделать так(в css):
CSS
1
2
3
4
5
.div
{
   vertical-align: center;
   text-align: center;
}
Но элементы центруются только по горизонтали.
Заранее спасибо!!!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
02.11.2009, 19:43
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Расположение по центру в теге div (HTML, CSS):

Расположение блоков div по центру - HTML, CSS
Как разместить все блоки div по центру? Игрался с float и position, но ничего не получилось. Не понимаю как работать с процентным...

Расположение икноки и текста в теге h2 рядом друг с другом - HTML, CSS
Столкнулся с такой задачей, есть иконка и рядом текст в теге h2, но все это дело находится в небольшой блоке в котором не помещается сам...

Как в теге li с высотой в 35px сделать ссылку с текстом по центру? - HTML, CSS
Как в теге li с высотой в 35px сделать ссылку с текстом по вертикали слева по середине или же снизу? <ul> <li...

Как наложить один DIV на другой DIV (чтобы он был по центру) - HTML, CSS
Попытаюсь сформулировать свой вопрос (сразу говорю в начале посмотрите на скриншот который внизу). И так приступили, создаю <div> но...

Тег <div> в теге <p> - HTML, CSS
Добрый вечер. Извиняюсь за глупый вопрос, но никак не могу понять следующую вещь. Есть код: &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; ...

Как растянуть основной div до футера и разместить текст ровно центру этого div? - HTML, CSS
Всем привет, решил попробовать создать простейший резиновый сайт и чтобы футер был привязан внизу, чтобы не писать стандартную форму...

16
FunDuck
688 / 379 / 4
Регистрация: 22.01.2009
Сообщений: 1,135
02.11.2009, 19:51 #2
У vertical-align нет значения "center", есть "middle". Только это вряд ли поможет. Попробуй line-height:"высота блока".
0
VtaMC
Просто Веталь
160 / 100 / 5
Регистрация: 11.05.2009
Сообщений: 628
02.11.2009, 21:28  [ТС] #3
vertical-align: middle - помог, но только в Google Chrome, в IE8 ни в какую... line-height - тоже не помог.
Вот полностью код css:
CSS
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;
    
}
0
BlackApricot
287 / 128 / 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>
2
Vanstorm
2771 / 336 / 5
Регистрация: 15.01.2008
Сообщений: 2,616
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 браузерах. почему?
2
Миниатюры
Расположение по центру в теге div  
BlackApricot
287 / 128 / 1
Регистрация: 15.02.2009
Сообщений: 520
03.11.2009, 21:54 #6
Цитата Сообщение от Vanstorm Посмотреть сообщение
У меня работает на 3 браузерах. почему?
Не знаю, мои версии работают в пяти.
0
Vanstorm
2771 / 336 / 5
Регистрация: 15.01.2008
Сообщений: 2,616
03.11.2009, 22:02 #7
BlackApricot,
на других я просто не проверял
это я к тому что вариант предложенный автором не так уж и плох.
0
VtaMC
Просто Веталь
160 / 100 / 5
Регистрация: 11.05.2009
Сообщений: 628
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>
Спасибо,но немного громоздко!
0
romchiksoad
1950 / 795 / 39
Регистрация: 03.11.2009
Сообщений: 3,067
Записей в блоге: 2
04.11.2009, 16:22 #9
CSS
1
div{text-align:center}
0
VtaMC
Просто Веталь
160 / 100 / 5
Регистрация: 11.05.2009
Сообщений: 628
04.11.2009, 18:27  [ТС] #10
Цитата Сообщение от romchiksoad Посмотреть сообщение
HTML5
1
div{text-align:center}
Это просто центровка по горизонтали.
0
BlackApricot
287 / 128 / 1
Регистрация: 15.02.2009
Сообщений: 520
04.11.2009, 18:31 #11
Цитата Сообщение от VtaMC Посмотреть сообщение
Спасибо,но немного громоздко!
Зато кроссбраузерно!
Сделай сам, сделай лучше нас.

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

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

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


нет,не всё)такое наверно уже было?
0
BlackApricot
287 / 128 / 1
Регистрация: 15.02.2009
Сообщений: 520
05.11.2009, 07:17 #14
Цитата Сообщение от romchiksoad Посмотреть сообщение
нет,не всё)такое наверно уже было?
Не, не припоминаю, специфическая задача.
Посмотрим, что ты там накодил.
0
BlackApricot
287 / 128 / 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; этого нет вообще в моих книгах, выложи, что есть.

Итог плачевный.
0
05.11.2009, 18:24
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
05.11.2009, 18:24
Привет! Вот еще темы с ответами:

Выровнять по центру, по горизонтали div, внутри другого div - HTML, CSS
Есть див, в нём три других дива. Как выровнять их по середине? В этих блоках был использован float:left, чтобы стояли в ряд.

Scroll в теге DIV не работает - HTML, CSS
Приветствую всех! Прошу всех прочитавших мне помочь. Постараюсь вкратце обьяснить: Нашел на неком сайте пример как с помощью DIV...

Не отображается изображение в теге div в IE/Firefox - HTML, CSS
Доброго времени суток! Есть html-документ со следующим содержимым: &lt;div class=&quot;special questions&quot;&gt; &lt;div class=&quot;icon&quot;/&gt; &lt;div...

Расположение нескольких div в другом div - HTML, CSS
Хочу в одном div(е) сделать 3 колонки из div(ов) в ряд. Одну колонку сделал, с левой стороны, а вторую колонку начинаю делать , но она...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
Опции темы

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