Посередине с элементом — CSS-LIVE
Недавно я написал пост в твиттере, чем озадачил некоторых людей. Они, возможно, подумали, что это был троллинг или сарказм!
Элемент <center> — это потрясающе. Почему я избегал его все эти годы?
Это легче
Допустим, я собираюсь отцентрировать некий текст. В процессе поиска решения мой мозг сталкивается с «вилкой»:
- Я использую элемент <center>.
- Я не использую элемент <center>, а выбираю решение из множества вариантов на базе CSS.
Допустим, мы выбрали вариант 2. Вот код:
<p>The witch had a cat and a very tall hat,</p> <p>And long ginger hair which she wore in a plait.</p> <p>By: Julia Donaldson and Axel Sheffler</p>
Я хочу выровнять по центру информацию об авторах. Вот какова цена второго варианта:
- Добавляем класс к последнему элементу
- Придумываем подходящее название класса, возможно «credit»
- Создаём новый стиль в CSS-файле
- Добавляем элемент <link> в раздел <head> моего документа
- Не забываем добавить rel=«stylesheet», иначе это не будет работать
- Добавляем 3 строки в CSS.
Вот такие вот:
.credit {
text-align: center;
}
Не очень много работы.
А теперь сравним с использованием элемента <center>
- Добавляем элемент <center> вокруг содержимого.
- Нет, второго шага нету. Вы на секунду попались, верно?
Но… но… семантика!
Хорошо. Семантика. Давайте оставим в стороне серьёзные разговоры, но вот какие утверждения я видел: элемент <center> не имеет никакого семантического значения.
Поэтому вместо него мы можем использовать элементы <span> или <div> (кстати, я уверен, что если вы собирались просто отцентрировать абзац, вы бы использовали элемент <p> и приведённый выше CSS.)
Но теперь вы используете элемент без какого-либо семантического значения, а затем добавляете CSS (и возможно классы), чтобы выровнять его по центру.
И почему же вместо этого не использовать элемент <center>, который «не имеет семантического значения», и не извлечь выгоду от поведения браузерных стилей по умолчанию, которые достаются вам просто так. Точно так же, как вы делаете в случае с разными уровнями заголовков. Или с элементами <sup> или <small>?
Да, но этот элемент считается устаревшим!
На самом деле, согласно W3C-валидатору, элемент является выведенным из употребления — звучит немного строже.
С другой стороны, ну и что с того? Красота HTML в том, что он работает, даже если вы его совсем перекорежите, браузер заставит его работать.
Старые страницы, написанные на элементах <font> и <big> всё ещё работают, и хорошо описаны в спецификаци для браузеров, которые поддерживают HTML4 и которые прекрасно знают, как должны быть застилизованы элементы эти элементы.
HTML4 достиг статуса рекомендации в 1999 году, а HTML5 (на 31 июля 2014) всё ещё находился в статусе кандидата в рекомендации.
Моё мнение: браузеры будут поддерживать элементы HTML4 ещё очень долгое… долгое время. Я готов держать пари, что HTML4 и стили элемента <center> будут поддерживаться дольше, чем будет существоватть этот блог (и другие мои сайты).
Итак, этот элемент устарел. Но он работает. И этим, в принципе, можно подытожить практически весь веб: но ведь это работает.
Больше элемента <center>?
Да, лично я убедил себя в том, что буду использовать элемент <center> чуточку чаще (чем вообще никогда, как раньше). Возможно, вы задумаетесь о том, чтобы вернуть этот элемент и в ваш инструментарий.
Оригинал статьи и автор
P.S. Это тоже может быть интересно:
- перевод
Как центрировать ссылки в CSS
Любой элемент, который мы добавляем в HTML, по умолчанию отображается в верхнем левом углу экрана.
Тем не менее, вы можете изменить положение элемента по умолчанию, используя различные свойства CSS. Точно так же, когда мы добавляем ссылку, она отображается в позиции по умолчанию, но вы можете выровнять их по центру, используя свойства CSS.
Существует два метода центрирования ссылки:
- Центрирование ссылок в CSS с использованием свойства « text-align »
- Центрировать ссылки в CSS с использованием свойства « margin »
В этой статье мы объясним оба метода центрирования ссылки. Итак, начнем!
Чтобы центрировать ссылки в HTML, мы будем использовать свойство CSS « text-align ». Свойство « text-align » в CSS используется для настройки выравнивания текста, например, по левому краю, по правому краю, по центру и по ширине.
Синтаксис
Синтаксис свойства text-align:
text-align: value
Вместо « value » вы можете установить выравнивание текста, такое как слева, справа, по центру , и обосновать.
Теперь мы будем использовать « text-align » для выравнивания по центру указанных ссылок.
ПримерЧтобы центрировать ссылку на веб-странице, мы добавим ссылку в HTML внутри тега
. Для этого используйте тег , чтобы определить гиперссылку и указать адрес нужного сайта. После этого укажите название ссылки. В нашем случае мы добавили ссылку на наш веб-сайт Linuxhint.HTML
Изображение ниже показывает, что ссылка добавлено, которое по умолчанию расположено слева:
Теперь перейдите к CSS, чтобы центрировать ссылку.
Здесь мы будем использовать « a » для доступа к добавленной ссылке. После этого установите значение text-align как « center » и отобразите как « block 9».0009». В результате элемент будет добавлен как элемент блока, начиная с новой строки и занимая всю ширину.
CSS
a{
text-align: center;
дисплей: блок;
}
Примечание. Свойство CSS text-align не работает само по себе для центрирования тега. Следовательно, вы должны использовать свойство « display » и установить его значение « block », чтобы центрировать ссылку.
Теперь перейдите к HTML и выполните его, чтобы увидеть следующий результат. Здесь вы можете видеть, что ссылка выровнена по центру веб-страницы:
Перейдем ко второму способу выравнивания ссылки по центру.
Способ 2. Центрирование ссылок в CSS с использованием свойства «margin» В CSS свойство « margin » используется для центрирования ссылки. Это сокращенное свойство свойств « margin-left », « margin-right », « margin-top » и « margin-bottom ».
Вы можете установить значения всех заданных свойств в одной строке.
Синтаксис
Синтаксис свойства margin:
margin: auto | вверху справа внизу слева
Ниже приведено описание приведенного выше синтаксиса:
- auto: Используется для установки элементов в соответствии с браузером.
- top: Используется для установки поля сверху.
- справа: Используется для установки поля справа.
- кнопка: Используется для установки поля снизу.
- слева: Используется для установки поля слева.
Примечание: Указание двух значений будет означать поля сверху и снизу и поля слева и справа; однако, если добавить одно значение, поле будет применяться ко всем четырем сторонам.
Давайте перейдем к примеру, где мы центрируем ссылку, используя свойство « margin ».
Пример Сначала установите значение свойства отображения как « блок «и ширина как « 70px «.
После этого примените свойство margin и установите его значение в « auto »:
a{
display:block;
ширина: 70 пикселей;
поле: авто;
}
Примечание: Необходимо установить свойства « дисплей » и « ширина »; в противном случае свойство « margin » работать не будет. Значение свойства ширины может быть установлено в соответствии с разрешением экрана дисплея и длиной текста.
На приведенном изображении видно, что ссылка успешно отцентрирована:
Вот и все! Мы объяснили методы центрирования ссылки.
Заключение Свойство « text-align » и « margin » используется для центрирования ссылки с помощью свойств « display » и « width ». Свойство display необходимо вместе со свойством text-align, при использовании свойства margin свойства display и width обязательны для центрирования ссылки.
В этом руководстве обсуждались различные методы центрирования ссылки в CSS.
html — Как центрировать содержимое (отцентрированных) чистых столбцов css
Фрагмент представляет собой серию столбцов, содержащих одну букву. Я хотел бы, чтобы центр глифа был в центре каждого, но, как вы можете видеть, они не совсем по центру — появляются чуть правее. (Подозреваю, что на половину ширины глифа, но не уверен).
Я пробовал justify-content: center , margin: auto безрезультатно. Осматривая чистоту, я не вижу ничего, что могло бы помешать тому, к чему я стремлюсь. Можете ли вы помочь мне исправить это?
.centered-cols {
выравнивание содержимого: по центру;
}
.ключ {
выравнивание текста: по центру;
минимальная ширина: 1,9 см;
поле: 0.2em;
радиус границы: 0,4 em;
цвет фона: светло-серый;
} <дел>А
Б
С
Д
Е
F
Г
В
Я
J
- html
- css
- yui-pure-css
Добавьте межбуквенный интервал: 0 в ваш . класс css:
key
- .902 {
межбуквенный интервал: 0;
выравнивание текста: по центру;
минимальная ширина: 1,9 см;
поле: 0.2em;
радиус границы: 0,4 em;
цвет фона: светло-серый;
}
<дел>
<дел>
А
Б
2em;
радиус границы: 0,4 em;
цвет фона: светло-серый;
} 