| Kosten | Понедельник, 19 Февраля 2018, 19:59 | Сообщение 1 |
| Иногда нам нужно красиво поставить текст по центру, чтоб по всем четырем сторонам были равные отступы, что при BB кодах это не сделать. И здесь нужно подключать стили, что рассмотрим все варианты, так можно и главное правильно поставить. Элемент center использовался для идентификации текста, который должен быть центрирован при визуализации браузером. Однако элемент устарел, а правильный и современный способ выравнивания по центру текста, с помощью CSS. Затем определите ширину и высоту для центрированного знаков, которые можно использовать как под описание или заголовок.
Люди часто недоумевают, что text-align: центр не центрирует таблицу целиком. Вместо этого он центрирует текст внутри каждой ячейки. Если вы хотите центрировать всю таблицу, вы должны установить ее левое и правое поля автоматически, что означает автоматически становятся равны. Вы можете установить верхнее и нижнее поля на любое значение, которое вы хотите. С использовать CSS для изменения визуальных элементов вашей формы, таких как настройка ширины кнопки отправки, настройка типа и размера шрифта, центрирование текста в элементе, изменение цвета текста и многое другое.
Мы начнем с простого элемента h1 внутри контейнера div.
Если вам нужно предмет поставить по центру,виде блока или логотипа, то h1 здесь не нужен, как раз на его места ставим код под блок и логотип.
Если рассматривать изначально и не чего не подключать, то получается так, что думаю многие сталкивались.
Теперь подключаем стили, но прежде нужно задать класс, он может быть разный, здесь прописал zornet_ru_kesag в div, что под него в CSS размещаем стилистику.
HTML
Код <div class="zornet_ru_kesag">
<h1>ZorNet: Создание сайта на uCoz</h1>
</div>
CSS
Код .zornet_ru_kesag {
height: 380px;
width: 380px;
background: #f2f2f7;
margin: 50px auto;
}
h1 {
font: 40px/1 Helvetica, sans-serif;
text-align: center;
}
Вот так получится:
Но теперь предположим, что мы хотим также центрировать эту строку текста по вертикали. Если бы это был абзац, мы бы вероятно учли приведенные выше методы, но поскольку это всего лишь одна строка, мы можем использовать этот способ.
CSS
Код .zornet_ru_kesag {
height: 180px;
width: 395px;
background: #eee;
margin: 145px auto;
}
h1 {
font: 40px/200px Helvetica, sans-serif;
text-align: center;
}
И здесь видим изменение:
Важно знать, что трюк работает только с одной строкой текста и немного взломан, поэтому может быть не подходит для всех ситуаций.
Как центрировать текст в HTML
Чтобы центрировать текст с помощью HTML, вы можете использовать тег center или использовать свойство CSS. Чтобы продолжить, выберите нужный вариант и следуйте инструкциям.
Использование тегов center
Один из способов сосредоточить текст, что заключить его в теги.
Код <center>Центрируйте этот текст!</center>
Важное замечание:
Тег center теперь считается устаревшим. Хотя он все еще может работать, ожидается, что он будет удален в пользу использования CSS. Мы рекомендуем использовать метод таблицы стилей для центра текста в HTML.
Использование свойства таблицы стилей
Вы можете центрировать текст с помощью CSS, указав свойство text-align элемента, который будет центрирован.
Если вам нужно выделить только один или несколько блоков текста, вы можете сделать, это добавив атрибут стиля в открывающий тег элемента и выбрав text-align свойство.
В приведенном ниже примере мы добавили их в тег p:
Код <p style="text-align:center">Центрируйте этот текст!</p>
Обратите внимание, что значение свойства text-align было установлено как «center», что указывает на то, что элемент должен быть центрирован.
Несколько блоков текста
Если у вас есть много блоков текста, которые вы хотели бы центрировать, вы можете использовать CSS внутри тегов style в разделе главы на странице, также во внешней таблице стилей, чтобы объявить, что каждый элемент центрирован.
Код <style>
p {
text-align:center
}
</style>
Текст будет сосредоточен в каждом наборе тегов p на странице. Если вы хотите, чтобы некоторые абзацы были центрированы, а другие нет, вы можете создать класс стиля, как показано в приведенном ниже коде.
Код <style>
.center {
text-align: center
}
</style>
Если вы создаете центр класс, как показано в предыдущем примере, абзац можно центрировать с помощью приведенного ниже кода, который вызывает центр класс.
Код <p class="center">Центрируйте этот текст!</p>
Как только класс был создан, он может быть применен к любому тегу HTML. Например, если вы хотите, чтобы заголовок был центрирован, вы могли бы добавить class="center" в h1 или другой тег заголовка.
Это как правило одна из первых вещей, которые вы изучаете в CSS. Просто установите свойство text-align в центр.
| | Страна: (RU) |
| |
