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

@VtaMC · Регистрация: 11.05.2009

Author24 — интернет-сервис помощи студентам

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

Пытался сделать так(в css):

CSS

.div
{
   vertical-align: center;
   text-align: center;
}

Но элементы центруются только по горизонтали.
Заранее спасибо!!!

@FunDuck · 02.11.2009, 19:51

У vertical-align нет значения "center", есть "middle". Только это вряд ли поможет. Попробуй line-height:"высота блока".

@VtaMC · 02.11.2009, 21:28 **[ТС]**

vertical-align: middle - помог, но только в Google Chrome, в IE8 ни в какую... line-height - тоже не помог.
Вот полностью код css:

CSS

.border
{
    width: 323px;
    height: 319px;
    background-image: url('widget_bg.png');
    text-align: center;
    display: table-cell;
    vertical-align:middle;
    line-height: 319px;
    
}

@BlackApricot · 03.11.2009, 11:19

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

Можно так:

HTML5

<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

<div style="background:#ccc; width:100%; height:111px; text-align:center;">
<div style="padding:45px 0 0 0;">
Текст в центре
</div></div>

Или так:

HTML5

<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 · 03.11.2009, 20:03

Ну не знаю вот это

HTML5

<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 браузерах. почему?

@BlackApricot · 03.11.2009, 21:54

Сообщение от Vanstorm

У меня работает на 3 браузерах. почему?

Не знаю, мои версии работают в пяти.

@Vanstorm · 03.11.2009, 22:02

BlackApricot,
на других я просто не проверял

это я к тому что вариант предложенный автором не так уж и плох.

@VtaMC · 04.11.2009, 12:11 **[ТС]**

Сообщение от Vanstorm

Ну не знаю вот это

HTML5

<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

<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

<div style="background:#ccc; width:100%; height:111px; text-align:center;">
<div style="padding:45px 0 0 0;">
Текст в центре
</div></div>

Или так:

HTML5

<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 · 04.11.2009, 16:22

CSS

1	div{text-align:center}

@VtaMC · 04.11.2009, 18:27 **[ТС]**

Сообщение от romchiksoad

HTML5

1	div{text-align:center}

Это просто центровка по горизонтали.

@BlackApricot · 04.11.2009, 18:31

Сообщение от VtaMC

Спасибо,но немного громоздко!

Зато кроссбраузерно!

Сделай сам, сделай лучше нас.

Сообщение от romchiksoad

div{text-align:center}

А ты всё читал, с самого начала?

@VtaMC · 04.11.2009, 18:41 **[ТС]**

Сделал вариант с таблицей:

HTML5

1	<table class="border"><td></table>

Работает везде, но не очень нравится... Ну ладно, просто я думал, что это можно как-то одним параметром осуществить, а так то на то и выходит - что таблицу использовать, что скрипты писать... Всем спасибо!!!

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

Добавлено через 2 минуты

Сообщение от BlackApricot

Цитата:
Сообщение от VtaMC
Спасибо,но немного громоздко!
Зато кроссбраузерно!
Сделай сам, сделай лучше нас.

Не я ничего не говорю, просто я думал всё решаемо одним параметром

@romchiksoad · 04.11.2009, 19:57

CSS

1	div{text-align:center;vertical-align:middle}

Другие значения:
baseline
sub
super
top-text
top
middle
bottom
bottom-text
процент %

нет,не всё)такое наверно уже было?

@BlackApricot · 05.11.2009, 07:17

Сообщение от romchiksoad

нет,не всё)такое наверно уже было?

Не, не припоминаю, специфическая задача.
Посмотрим, что ты там накодил.

@BlackApricot · 05.11.2009, 18:24

Сообщение от Vanstorm

Это не работает вообще, совсем.
line-height: вот это высота строки, то есть если дать текст, а не слово, то получаем полный бред. Расстояние между строк 319рх, ну и сколько таких строк уместится по высоте?????????

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

Итог плачевный.

@Vanstorm · 05.11.2009, 19:49

BlackApricot,

HTML5

<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>

найдено на просторах интернета....

@BlackApricot 288 / 131 / 4 Регистрация: 15.02.2009 Сообщений: 520
	05.11.2009, 07:17	14
	Сообщение от romchiksoad нет,не всё)такое наверно уже было? Не, не припоминаю, специфическая задача. Посмотрим, что ты там накодил. 0

@BlackApricot 288 / 131 / 4 Регистрация: 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

@FunDuck 692 / 383 / 51 Регистрация: 22.01.2009 Сообщений: 1,135
	02.11.2009, 19:51	2
	У vertical-align нет значения "center", есть "middle". Только это вряд ли поможет. Попробуй line-height:"высота блока". 0

@BlackApricot 288 / 131 / 4 Регистрация: 15.02.2009 Сообщений: 520
	03.11.2009, 21:54	6
	Сообщение от Vanstorm У меня работает на 3 браузерах. почему? Не знаю, мои версии работают в пяти. 0

@Vanstorm 2773 / 341 / 22 Регистрация: 15.01.2008 Сообщений: 2,614
	03.11.2009, 22:02	7
	BlackApricot, на других я просто не проверял это я к тому что вариант предложенный автором не так уж и плох. 0

@BlackApricot 288 / 131 / 4 Регистрация: 15.02.2009 Сообщений: 520
	04.11.2009, 18:31	11
	Сообщение от VtaMC Спасибо,но немного громоздко! Зато кроссбраузерно! Сделай сам, сделай лучше нас. Сообщение от romchiksoad div{text-align:center} А ты всё читал, с самого начала? 0