Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Установить посредине текст внутри DIV-а / 9 сообщений из 9, страница 1 из 1
06.01.2009, 10:19
    #35745410
iConst
iConst
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Установить посредине текст внутри DIV-а
Привет всем!

Старая, с бородой тема, но вопрос не о том.
Известны всякие хаки, но я решил сделать по-другому.

Беру высоту div-контейнера и текстового контейнера и вычисляю смещение.
Типа так:
Код: plaintext
1.
2.
3.
var hgt1 = parseInt(document.getElementById("outerContainer").style.height);
var hgt2 = parseInt(document.getElementById("innerContainer").style.height);
var pos = parseInt((hgt1 - hgt2) / 2).toString();
document.getElementById("innerContainer").style.top = pos + "px";

Но внутренний контейнер получается не посередине: он смещен на два пиксела вниз.
Это справедливо для всех самых распространенных браузеров.

Если сделать так, то все ОК:
...
var pos = parseInt((hgt1 - hgt2 - 2 ) / 2).toString();
...
Почему так происходит?
Спасибо.

Перевернув мир - оглянись, может перевернулся ты сам?!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.01.2009, 10:45
    #35745428
Restavraciya
Restavraciya
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Установить посредине текст внутри DIV-а
Может бордер ?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.01.2009, 11:53
    #35745489
iConst
iConst
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Установить посредине текст внутри DIV-а
RestavraciyaМожет бордер ?
Нет, хоть внешний DIV и имеет бордер в 1рх, но это не влияет на позицию - проверял отключая бордер в "0". Внутренний DIV не имеет бордера.

Конструкция проста:
Код: plaintext
1.
2.
3.
4.
<div id="outerContainer" class="outerContainer" style="padding: 0px; margin: 0px; width: 200px; height: 33px">
    <div id="innerContainer" class="innerContainer" style="width: 100%; font-size: 13px; height: 13px;">
       Мой текст
    </div>
</div>

:)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.01.2009, 15:57
    #35745851
lanzer
lanzer
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Установить посредине текст внутри DIV-а
Код целиком что-ли дайте.. Прям интересно.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.01.2009, 19:22
    #35746129
iConst
iConst
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Установить посредине текст внутри DIV-а
lanzerКод целиком что-ли дайте.. Прям интересно.

Да, собственно весь код ранее приведен, только есть еще стили: Для outerContainer - border: solid 1px #ccc;
Для innerContainer - position: relative;

И фсе! :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
06.01.2009, 20:27
    #35746163
Ренат
Ренат
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Установить посредине текст внутри DIV-а
iConst
Конструкция проста:
Код: plaintext
1.
2.
3.
4.
<div id="outerContainer" class="outerContainer" style="padding: 0px; margin: 0px; width: 200px; height: 33px">
    <div id="innerContainer" class="innerContainer" style="width: 100%; font-size: 13px; height: 13px;">
       Мой текст
    </div>
</div>

:)
А чем не устраивает примитивная конструкция?
Код: plaintext
1.
2.
<div id="outerContainer" style="display:table-cell;vertical-align:middle;text-align:center;width:300px;height:300px">
Мой текст
</div>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.01.2009, 10:36
    #35746519
iConst
iConst
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Установить посредине текст внутри DIV-а
Ренат
А чем не устраивает примитивная конструкция?
Код: plaintext
1.
2.
<div id="outerContainer" style="display:table-cell;vertical-align:middle;text-align:center;width:300px;height:300px">
Мой текст
</div>

Тем, что М$ плевала на W3C стандарты. В IE это не работает. К сожалению, на этих, так сказать, браузерах значительная доля юзверей сидит.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.01.2009, 13:36
    #35746628
Ренат
Ренат
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Установить посредине текст внутри DIV-а
iConst
Тем, что М$ плевала на W3C стандарты. В IE это не работает. К сожалению, на этих, так сказать, браузерах значительная доля юзверей сидит.
Вот нехарошие, тьфу - тьфу...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
07.01.2009, 13:46
    #35746639
iConst
iConst
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Установить посредине текст внутри DIV-а
Однозначно! :))
Перевернув мир - оглянись, может перевернулся ты сам?!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Установить посредине текст внутри DIV-а / 9 сообщений из 9, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 799ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1455335]:
 0ms
get settings:
 11ms
get forum list:
 21ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 441ms
get topic data:
 14ms
get forum data:
 4ms
get page messages:
 59ms
get tp. blocked users:
 2ms
others: 239ms
total:  799ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]