text-align
Определяет горизонтальное выравнивание текста в пределах элемента.
Синтаксис
text-align: center | justify | left | right | inherittext-align: center | justify | left | right | start | endЗначения
center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Строки текста словно нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный способ выравнивания активно используется в заголовках и различных подписях, вроде подрисуночных, он придает официальный и солидный вид оформлению текста. Во всех других случаях выравнивание по центру применяется редко по той причине, что читать большой объем такого текста неудобно. justify Выравнивание по ширине, что означает одновременное выравнивание по левому и правому краю. Чтобы произвести это действие браузер в этом случае добавляет пробелы между словами. left Выравнивание текста по левому краю. В этом случае строки текста выравнивается по левому краю, а правый край располагается «лесенкой». Такой способ выравнивания является наиболее популярным на сайтах, поскольку позволяет пользователю легко отыскивать взглядом новую строку и комфортно читать большой текст. right Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него начинается чтение новых строк, такой текст читать труднее, чем, если бы он был выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно для коротких заголовков объемом не более трех строк. Мы не рассматриваем специфичные сайты, где текст приходится читать справа налево, там возможно подобный способ выравнивания и пригодится. auto Не изменяет положение элемента. inherit Наследует значение родителя. start Аналогично значению left , если текст идёт слева направо и right , когда текст идёт справа налево. end Аналогично значению right , если текст идёт слева направо и left , когда текст идёт справа налево.
HTML5 CSS2.1 IE Cr Op Sa Fx
text-align Результат данного примера показан на рис. 1.
Рис. 1. Выравнивание текста в браузере Safari
Internet Explorer до версии 7.0 включительно несколько иначе трактует данный пример, чем другие браузеры, выравнивая не только текст, но и блоки (рис. 2).
Рис. 2. Выравнивание текста в браузере Internet Explorer 7
Объектная модель
[window.]document.getElementById(» elementID «).style.textAlign
Браузеры
IE до версии 7.0 включительно выравнивает не только содержимое блочного элемента, но и сам элемент.
Как опустить текст вниз блока div?
Всем привет! У меня есть блок div в котором содержится текст. Каким атрибутом CSS можно опустить этот текст вниз блока?
Заранее спасибо!
. согласен с 1 ответом.
padding-top или margin-top
Если перенести текст вниз, как при нажатии клавиши Enter, то можно просто вставить
Если оставить DIV на месте, никуда его не перемещая, то для внутреннего его содержимого отступы будут прописаны однозначно только свойством : PADDIND. Для того, чтобы отступ был снизу, то padding-bottom: значение;
Как спустить текст вниз?
Скрипт написан здесь Блок на 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 12 12 серебряных знаков 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); text-align
text-align CSS-свойство описывает, как линейное содержимое, наподобие текста, выравнивается в блоке его родительского элемента. text-align не контролирует выравнивание элементов самого блока, но только их линейное содержимое.
| Начальное значение | start , или неназванное значение, которое действует как left , если direction : ltr или как right , если direction : rtl , а если start не поддерживается браузером. |
|---|---|
| Применяется к | блочные контейнеры |
| Наследуется | да |
| Обработка значения | как указано, кроме значения match-parent , которое вычисляется вместо значения его родителя direction , а результаты в вычисленном значении left или right |
| Animation type | discrete |
Синтаксис
text-align =
start | (en-US)
end | (en-US)
left | (en-US)
right | (en-US)
center | (en-US)
justify | (en-US)
match-parent | (en-US)
justify-all
text-align: left text-align: right text-align: center text-align: justify text-align: start text-align: end text-align: match-parent text-align: start end text-align: "." text-align: start "." text-align: "." end text-align: inherit
Значения
start Экспериментальная возможность
Подобно left если направление слева направо, и right если наоборот.
Подобно right если направление слева направо, и left если наоборот.
Линейное содержимое выравнивается по левому краю линейного блока.
Линейное содержимое выравнивается по правому краю линейного блока.
Линейное содержимое центрируется в линейном блоке.
Первое появление односимвольной строки — это элемент используемый для выравнивания. Ключевое слово, следует или предшествует, и определяет, как это выравнивается. Это позволяет выравнять численные значения с десятичной точкой, к примеру.
Текст выравнивается. Тексту следует выстраивать свои левые и правые границы по левым и правым границам содержимого параграфа.
Наподобие inherit с различием, что значение start и end вычисляются в соответствии direction и заменяются соответствующим left или right значением.