ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Установить посредине текст внутри DIV-а
9 сообщений из 9, страница 1 из 1
Установить посредине текст внутри DIV-а
    #35745410
Фотография iConst
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
iConst
Участник
Привет всем!

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

Беру высоту 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:19
| Ответить | Цитировать | Написать  
Установить посредине текст внутри DIV-а
    #35745428
Фотография Restavraciya
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Restavraciya
Участник
Может бордер ?
...
Рейтинг: 0 / 0
06.01.2009, 10:45
| Ответить | Цитировать | Написать  
Установить посредине текст внутри DIV-а
    #35745489
Фотография iConst
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
iConst
Участник
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, 11:53
| Ответить | Цитировать | Написать  
Установить посредине текст внутри DIV-а
    #35745851
lanzer
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
lanzer
Участник
Код целиком что-ли дайте.. Прям интересно.
...
Рейтинг: 0 / 0
06.01.2009, 15:57
| Ответить | Цитировать | Написать  
Установить посредине текст внутри DIV-а
    #35746129
Фотография iConst
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
iConst
Участник
lanzerКод целиком что-ли дайте.. Прям интересно.

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

И фсе! :)
...
Рейтинг: 0 / 0
06.01.2009, 19:22
| Ответить | Цитировать | Написать  
Установить посредине текст внутри DIV-а
    #35746163
Фотография Ренат
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ренат
Участник
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
06.01.2009, 20:27
| Ответить | Цитировать | Написать  
Установить посредине текст внутри DIV-а
    #35746519
Фотография iConst
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
iConst
Участник
Ренат
А чем не устраивает примитивная конструкция?
Код: 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, 10:36
| Ответить | Цитировать | Написать  
Установить посредине текст внутри DIV-а
    #35746628
Фотография Ренат
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Ренат
Участник
iConst
Тем, что М$ плевала на W3C стандарты. В IE это не работает. К сожалению, на этих, так сказать, браузерах значительная доля юзверей сидит.
Вот нехарошие, тьфу - тьфу...
...
Рейтинг: 0 / 0
07.01.2009, 13:36
| Ответить | Цитировать | Написать  
Установить посредине текст внутри DIV-а
    #35746639
Фотография iConst
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
iConst
Участник
Однозначно! :))
Перевернув мир - оглянись, может перевернулся ты сам?!
...
Рейтинг: 0 / 0
07.01.2009, 13:46
| Ответить | Цитировать | Написать  
9 сообщений из 9, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Установить посредине текст внутри DIV-а
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=35745428&tid=1455335]:
 0ms
get settings:
 9ms
get forum list:
 20ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 190ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 42ms
get tp. blocked users:
 1ms
others: 251ms
total:  531ms
созд. / загр.: 531ms
x
x
Закрыть


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