2014-02-05 4 views
2

Я следующий набор шрифтов в HTML:Нужно найти пиксели ширину и высоту буквы

<div id="centerLeft"><span style="font-family: "myFont", Arial; font-size: 200%;">Z</span></div>

Мне нужно, чтобы узнать точную ширину пикселей и высоту этой буквы Z для того, чтобы разместите это письмо в правильном месте в браузере (слегка слева от центра браузера).

Мои centerLeft ДИВ является:

#centerLeft { 
    position: fixed; 
    top: 47.4%; 
    left: 53.5%; 
    margin-top: -?px; NEED! 
    margin-left: -?px; NEED! 
} 

Любые мысли о том, как получить его размеры?

Другой вариант !:

#centerLeft { 
     position: absolute; 
     left: 50%; 
     top: 50%; 
     transform: translate(-50%, -50%); 
} 

Однако я не понимаю, как управлять этим, так что остается в это желаемое местоположение в браузере ... это правильно не масштабируется с окном браузера (не оставаясь в центрировано влево). Я попытался изменить осталось что-то вроде 48% и перевести (-52% ... ЭСТ., Но не кости.

Спасибо.

+0

Хороший вопрос ... –

+0

Из темы вы сделали опечатку. Либо используйте '# centerLeft' в CSS, либо меняйте id на класс в html. Прямо сейчас, css не будет применяться к вашему html. – sachinjain024

+0

Я не уверен, что я понял, он исправлен, поэтому он не должен двигаться при изменении размера браузера? Конечно, селектор ошибочен, у вас есть идентификатор и ориентирован на класс, кавычки в встроенном стиле также неверны, но если предположить, что это опечатки, я не вижу, как письмо может двигаться? – adeneo

ответ

2

использование JQuery .outerHeight() он будет возвращать внешний высоту элемента

для получения точного значения удалить все отступы и поля элемента

+0

Но как я могу применить это значение @ в реальном времени в CSS? Предлагаете ли вы просто использовать это как инструмент externalv, применяя размеры? – user2072256

+0

вы можете динамически установить css с помощью jQuery –

+0

Мне нужно будет реализовать это и попробовать сначала. Спасибо за помощь. Мое первое предпочтение - исправить это в CSS, если нет, я попробую JQuery. – user2072256

0

Возможно, определив все свойства позиции в вашем CSS:

#letter 
{ 
    position: absolute; 
    left: 40%; 
    top: 50%; 
    bottom: 50%; 
    right: 60%; 

} 

Пример: http://jsfiddle.net/8QTAk/

Смежные вопросы