[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Javascript вычислить отступ align-center
Stasonix
Как узнать на сколько пикселей (т.е. расстояние) сделал text-align:center отступ от левого края в блоке?

допустим есть div со стилем style='text-align:center; width: 300px'
div
test me on
/div

нужно вычислить расстояние от левого края до 1-й буквы строки.



Спустя 18 минут, 23 секунды (24.12.2011 - 16:34) Nikitian написал(а):
вставьте туда инлайновый элемент, например span и попробуйте через $(element).offset(); вычислить его координаты. Подозреваю, что задачу можно решить без вычисления этих координат.

Спустя 2 минуты, 27 секунд (24.12.2011 - 16:36) Stasonix написал(а):
задачу нельзя решить вставкой элементов, так бы и не спрашивал.

Спустя 1 час, 40 минут, 13 секунд (24.12.2011 - 18:16) redreem написал(а):
вот это тебе конечно поможет, но мое мнение (а я предполагаю что эта тема - продолжение темы о центрировании списка), что у тебя изначальная вражда с версткой. какие-то экзотические вещи тебе приходится копать.

Спустя 1 час, 10 минут, 38 секунд (24.12.2011 - 19:27) Nikitian написал(а):
Цитата (redreem @ 24.12.2011 - 18:16)
вот это тебе конечно поможет, но мое мнение (а я предполагаю что эта тема - продолжение темы о центрировании списка), что у тебя изначальная вражда с версткой. какие-то экзотические вещи тебе приходится копать.

Там действительно экзотическая проблема, которая возможна при неправильном дизайнере. Суть: пункт меню центрируется в блоке фиксированной ширины, а элементы его подменю должны выравниваться по левому краю этого пункта меню, а не блока, в котором он отцентрирован. Вообще дизайнерам за такое надо руки вырывать, но тут даже не дизайнер виноват, а невнимательность, т.к. у конкретно ТС такой задачи не стоит вовсе )

Спустя 56 минут, 3 секунды (24.12.2011 - 20:23) redreem написал(а):
:D :D :D

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>
123</title>
</head>
<body>

<div
id="ourHellDiv" style="text-align:center; width: 300px;background-color:#faa;color:#333">
test me on
</div>

<div
id="archangelGavriil" style="width:300px;background-color:#afa;color:#333">Этот див по ширине должен стать до текста предыдущего дива</div>

<script
type="text/javascript">
doc = document;

oHDEl = doc.getElementById('ourHellDiv');
oHDEl.innerHTML = '<span id="ourParadiseSpan">'+oHDEl.innerHTML+'</span>';
oPSEl = oHDEl.getElementsByTagName('span')[0];

textOffsetX = Math.floor((oHDEl.offsetWidth - oPSEl.offsetWidth)/2);

oHDEl.innerHTML = oPSEl.innerHTML;

alert(textOffsetX);

doc.getElementById('archangelGavriil').style.width = textOffsetX+'px';
</script>

</body>
</html>
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.