Как поднять текст вверх в html
Для смещения слов в тексте, можно использовать CSS свойство vertical-align . В качестве значения, это свойство может принимать не только значения в виде слов, но и пиксели, проценты и другие доступные единицы. Так, например, выставив положительное значение мы можем поднять часть букв, или часть слов вверх относительно остального текста.
Пример текста class="up">где часть слов class="up">будут подняты
p /* Сделаем текст крупнее чтобы лучше видеть разницу */ font-size: 20px; > .up vertical-align: 15px; > Как спустить текст вниз?
Скрипт написан здесь Блок на css Я вставил туда ссылку и у меня щас пробелма. Я сделал этот блок высотой 50px и щас мне надо опустить на 16px. Я сделал margin-top: 16px; но не работает. (header — это тот самый стиль блока; txt-logo — стили текста)
Как мне опустить текст вниз?
Отслеживать
задан 8 фев 2014 в 14:58
380 1 1 золотой знак 4 4 серебряных знака 19 19 бронзовых знаков
Не совсем понятно, что вам требуется получить?
8 фев 2014 в 19:04
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
.txt-logo < color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); font-size: 26px; margin-left: 6%; // зачем если все равно обнуляете в конце? text-align: center; text-decoration: none; margin: 0; padding-top: 16px; // может это вам надо? >Отслеживать
ответ дан 8 фев 2014 в 19:02
2,542 13 13 серебряных знаков 12 12 бронзовых знаков
Не работает, но я уже решил оставить так как есть.
8 фев 2014 в 19:14
Оставил вот такой скрипт: ` .txt-logo < color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); font-size: 26px; margin-left: 6%; text-decoration: none; >`
8 фев 2014 в 19:15
@cnofss, а с каких пор код CSS называется скриптом? Может это какие-то новые веяния в верстке, а я и не знал . -)
9 фев 2014 в 3:25
Ну что вам конкретно надо вниз опустить? Текст ссылки? Если да, то может вам попробовать отдельное правило для ссылки? .txt_logo a < display: block; margin:16px auto 0 auto; >
9 фев 2014 в 5:56
Вот этот вариант работает 😀
9 фев 2014 в 9:06
Margin не сработал по причине того что тег a является inline он по умолчанию не может двигаться вверх или вниз ОТСТУПАМИ.
Отсюда можно сделать вывод, если хотим сделать отступ сверху нужно чтобы элемент перестал быть inline. Например так:
display: inline-block; margin-top: 100px; Так же мы можем позиционировать элемент относительно экрана/родителя/своего места в DOM. с помощью (пример позиционирования элемента относительно родителя, у родителя тоже должен быть position: relative):
position: absolute; top: 100px; left: 5px; Так же мы можем сдвинуть элемент с помощью трансформаций например(сдвинуть по Y Элемент относительно своего места в DOM):
transform: translateY(-50px); Выравнивание текста по вертикали и по центру с помощью CSS.
Задача верстки, которая очень часто встречается – это выравнивание текста по вертикали в блоке div.
Если с выравниванием текста по горизонтали, проблем обычно не возникает (используем свойство text-align:center и все будет хорошо), то с выравниванием по вертикали все немного сложнее.
Есть одной свойство в CSS, которое называется vertical-align. Казалось бы, используя его можно решить все проблемы. Но не тут-то было.
Нужно учитывать такой момент, что vertical-align можно применять только для выравнивания содержимого ячеек таблиц или для строчных элементов, для выравнивания их друг относительно друга в пределах одной строки.
Для блочных элементов свойство vertical-align не работает.
Есть два способа, как можно выйти из этой ситуации:
Для тех, кто предпочитает все смотреть в видео:
Для тех, кто любит текст, читайте ниже способ решения этой проблемы.
Способ А. Как одно из решений, можно разместить текст не в элементе div, а в ячейке таблицы.
| Строка 1 Строка 2 Строка 3 |
Способ Б. Использовать своство display:table-cell;
Строка 1
Строка 2
Строка 3
Одна проблема, это свойство не поддерживают Internet Explorer 6-7 версии.
Ситуация 1. Выравнивание одной строки текста.
Рассмотрим простой пример.
Строка, которая должна быть выровнена по вертикали
Строка текста располагается по верхнему краю. Т.к. у нас всего одна строка текста, то для выравнивания можно воспользоваться самым простым способом: это добавление свойства line-height со значением равным высоте элемента div, в котором текст находится.
Строка, которая должна быть выровнена по вертикали
Этот способ хорошо работает, когда у вас всего одна строка с текстом.
Ситуация 2. Если известны точные значения ширины и высоты дочернего блока, где располагается сам текст.
Этот вариант решения предусматривает использование свойства position:absolute для дочернего блока, абсолютного его позиционирования относительно родительского блока с position:relative.
Строка 1
Строка 2
Строка 3
Зная ширину и высоту блока, можно взять половину этой величины и задать ее отрицательными значениями для свойств margin-left и margin-top.
Есть еще более современное решение этой проблемы — использование flexbox.
Если не нужна поддержка старых браузеров, этот вариант будет самым оптимальным.
Как видите, такая простая задача, как выравнивание текста по центру, оказалась не такой простой на практике.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
каким образом опустить текст в нужное место в css??
мой сайт [ссылка заблокирована по решению администрации проекта] текст в блоках опустить не могу («меню сайта»»добро пожаловать»,»вперёд на поиски») подскажите как это сделать. (ответы только строго касающиеся темы)
ОЧЕНЬ ПРОШУ ОТВЕТЫ ПИСАТЬ ПО СОБСТВЕННОМУ ОПЫТУ А НЕ ДЕЛИТЬСЯ ССЫЛКАМИ!!
Голосование за лучший ответ
Вот так нужно работать с атрибутом DIV.
И так чтобы переместить блог DIV нужно ввести координаты
Например введем в СSS так:
div.block1 <
margin-top: 50px;
margin-left: 200px;
>
Ну а дальше какие атрибуты нужно то и добавляешь.
Ну а в HTML
коде это будет выглядеть так:
Твой текст.
Ну а теперь объясню как это работает.
Атрибут margin-top указывает расстояние между верхней частью экрана и блога с текстом.
Ну в margin-left указывает расстояние между левым частей экрана и блога с текстом.