Увеличить DIV tag

Вчера я задал вопрос How to make text vertically and horizontally center in an HTML page, касающийся способа центрировать текст в середине страницы (по вертикали и по горизонтали).Увеличить DIV tag

Решение работает нормально, но теперь я хочу увеличить размер текста, но проблема в том, что я не хочу использовать единицу измерения «px», поскольку является статическим и не может адаптироваться ко всему экрану размеры.

Поэтому я хочу использовать процентное значение единицы измерения для текста.

HTML код:

<body> 
    <div class="my-block"> 
     WORD1<br /> 
     WORDWORDWORDWORD2 
    </div> 
</body>

Трудности я облицовка с высотой <div />. Я не могу установить высоту div, равную высоте body, ширина равна, потому что div является блочным элементом, но как я установил высоту div, равную высоте body?

я уже пытался поставить padding и margin как 0 и height к 100%, но ничего не работает.

Может ли кто-нибудь мне помочь?

источник

2012-03-23 tt0686

Ehm, в коде в принятом пост со вчерашнего дня высота 'div' составляет 100% ... См http://jsfiddle.net/Mikey/2mgMy/ –

Что 100% высота тела. Если я очищаю дисплей: таблицу и отображение: table-cell из свойств div, я понимаю, что DIV занимает одну и ту же высоту от родительского элемента, в этом случае BODY. Поэтому я могу увеличить высоту элемента, который имеет свойство отображения установлено в table-cell? – tt0686

Я думаю, что это то, что вам нужно:

<style type="text/css"> 
html {height: 100%;} 
body {margin: 0;padding: 0;height: 100%;} 
.my-block {height:100%;} 
</style>

в действии: 100% height

Однако, если вы хотите "адаптировать" ваш текст «на все размеры экрана» есть улов. Процентные и EM-единицы, используемые с размером шрифта, делают то же самое (по крайней мере теоретически, хотя% лучше с точки зрения совместимости) - они масштабируют текст на основе его фактического размера в пикселях. Другими словами, font-size: xx% не масштабирует текст в зависимости от высоты или ширины контейнера, а зависит от текущего размера текста.

См css font units

Вы можете добиться того, что вы хотите с помощью JavaScript. Однако я не рекомендую этого делать. Позвольте пользователю решить, нужен ли ему увеличение/масштабирование.

Cheers!

источник

2012-03-23 12:28:20

Это работает, но проблема в том, что тело не заполняет высоту видового экрана. Добавить это также:

html,body{ 
    margin: 0; 
    padding: 0; 
    height: 100%; 
}

jsFiddle with your original code.

источник

2012-03-23 11:12:42 Supr

Спасибо за быстрый ответ :) Если вы посмотрите на код в ссылке, вы увидите, что у меня уже есть те свойства, которые определены для элемента body. – tt0686

Ваш исходный код работает в jsfiddle в Opera, см. Ссылку, которую я добавляю в сообщение. Не могли бы вы показать фактический код, который используете? Убедитесь, что между контейнерами есть контейнеры.my-block', а тело также имеет высоту, равную 100%. – Supr

Я попытался отобразить свойство display: table из элемента BODY и отображение: свойство table-cell из DIV и DIV имеет ту же высоту из элемента BODY, но текст больше не остается центрированным. Итак, мой вопрос: как я могу поместить ту же высоту в элемент, который использует отображение: свойство table-cell? – tt0686

Увеличить DIV tag

ответ

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