Мне интересно, какие параметры есть в строгом xhtml 1.0, чтобы создать строку с обеих сторон текста примерно так:
Первый раздел ----------------------- Следующий раздел ----------------------- Раздел второй
Я думал о некоторых модных вещах, как это:
<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section
Или в качестве альтернативы, потому что вышеописанные проблемы с выравниванием (как вертикальным, так и горизонтальным):
<table><tr>
<td style="width:47%"><hr/></td>
<td style="vertical-align:middle; text-align: center">Next section</td>
<td style="width:47%"><hr/></td>
</tr></table>
Это также имеет проблемы с выравниванием, которые я решаю с этим беспорядком:
<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%"> </td>
</tr><tr>
<td> </td>
<td> </td>
</tr></table>
В дополнение к проблемам с выравниванием оба варианта кажутся «нечеткими», и я был бы очень признателен, если бы вы случайно видели это раньше и знали об элегантном решении.
.divider
).Ответы:
Я не знаю, было ли это выяснено, но flexbox предлагает довольно решение:
Смотрите http://jsfiddle.net/MatTheCat/Laut6zyc/ для демонстрации.
Сегодня совместимость не так уж плоха (вы можете добавить все старые синтаксисы flexbox), и она изящно ухудшается.
источник
Как насчет:
Проверьте это JSFiddle .
Вы можете использовать
vw
или%
сделать его отзывчивым .источник
font-size
.Способ решить эту проблему, не зная ширину и цвет фона, следующий:
Структура
CSS
Пример: http://jsfiddle.net/z8Hnz/
Двойная линия
Чтобы создать двойную линию, используйте один из следующих параметров:
1) Исправлено пространство между строками
Пример: http://jsfiddle.net/z8Hnz/103/
2) Пользовательский пробел между строками
Пример: http://jsfiddle.net/z8Hnz/105/
SASS (SCSS) версия
Основываясь на этом решении, я добавил SCSS "со свойством цвета", если это может кому-то помочь ...
пример использования:
источник
Вы можете сделать это с помощью :: before и :: after, не зная ширины контейнера или цвета фона, и добиться большей стилизации разрывов строк. Например, это можно изменить, чтобы сделать двойные линии, пунктирные линии и т. Д.
JSFiddle
CSS и использование HTML:
Версия SCSS:
источник
Попробуй это:
Предварительный просмотр на jsFiddle .
источник
.divider hr
ширина зависит от длины текста. Предложение:.divider
и.divider hr
ширина должна быть указана вem
единицах. Чтобы получитьhr
ширину, используйте (.divider
ширина минус число символов) / 2.Я только что столкнулся с той же проблемой, вот один из способов ее решения:
Он работает без установки фона для текстового элемента, т.е. он будет хорошо выглядеть независимо от того, какой фон скрыт за ним.
Вы можете попробовать это здесь: http://jsfiddle.net/88vgS/
источник
ОБНОВИТЬ: это не будет работать, используя HTML5
Вместо этого, проверьте этот вопрос для получения дополнительной техники: вызов CSS, могу ли я сделать это, не вводя больше HTML?
Я использовал
line-height:0
для создания эффекта в шапке моего сайта guerilla-alumnus.comЕще один хороший метод на http://robots.thoughtbot.com/
Он использует фоновое изображение и плавает, чтобы добиться крутого эффекта
источник
источник
Если вы можете использовать CSS и готовы использовать устаревший
align
атрибут, будет работать стилизованный набор полей / легенда:Назначение набора полей - логически сгруппировать поля формы. Как указал Уиллер,
text-align: center
стиль дляlegend
элементов не будет работать .align="center"
HTML устарел, но он должен правильно центрировать текст во всех браузерах.источник
<legend>
принимает на дисплей черты элементаblock
илиinline-block
, так как он может быть дополнен и заштрихован, что означает, что онtext-align:center
не должен работать ...legend
элемента,align="center"
я могу найти единственное решение, которое надежно центрирует alegend
.Сетка начальной загрузки:
HTML:
CSS:
источник
vertical-center
класс больше не существует в начальной загрузки (4.3.1). Не могли бы вы обновить свой ответ, чтобы сказатьalign-items-center
?Вы можете просто использовать положение относительно и установить высоту на родителя
источник
Вот простое решение только с CSS, без фоновых трюков ...
HTML:
пример скрипки: https://jsfiddle.net/0Lkj6wd3/
источник
Злой хак ...
источник
Поднятие 2-летнего поста, но вот как я подхожу к этим ситуациям, используя только один элемент и CSS.
А вот скрипка, чтобы проверить это: http://jsfiddle.net/sRhBc/ (случайное изображение от Google, взятое за границу).
Единственным недостатком этого подхода является то, что он не поддерживает IE7.
источник
Просто используйте
источник
Woohoo мой первый пост, хотя это год. Чтобы избежать проблем с окраской фона в оболочках, вы можете использовать inline-block с hr (никто не сказал этого явно). Выравнивание текста должно центрироваться правильно, поскольку они являются встроенными элементами.
источник
Я использую
h1
с пролетом в середине.Пример HTML:
Пример CSS:
Просто как тот.
источник
span
, вы можете использоватьdiv
. Он служит той же цели, за исключением того, что он, естественно, является блочным элементом. :)h1
- встроенный элемент.span
хорош для упаковки, но причина, по которой я предпочитаю adiv
в этом случае, заключается в том, что Youri использует CSS, чтобы установитьspan
дляdisplay:block;
. Я не вижу смысла превращать встроенный элемент в элемент блока, когда есть подходящие элементы блока (div
), легко доступные.h1
на самом деле это элемент BLOCK. Извините за путаницу. Тем не менее, я не вижу смысла превращать егоspan
в элемент блока, но достаточно справедливо.Глядя на выше, я изменил:
CSS
HTML
Кажется, работает нормально.
источник
Принятие решения @ kajic и размещение стиля в CSS:
Затем CSS (но это зависит от CSS3 при использовании n-го селектора):
Приветствия.
(PS В tbody и tr, Chrome, IE и Firefox по крайней мере автоматически вставляют tbody и tr, поэтому в моем примере, например, в @ kajic, они не были включены, чтобы сократить объем необходимой разметки html. Это решение был протестирован с новейшими версиями IE, Chrome и Firefox, начиная с 2013 года).
источник
ДЕМО СТРАНИЦА
HTML
CSS
источник
Это сработало для меня и не требует цвет фона за текстом, чтобы скрыть границу, вместо этого используется фактический тег hr. Вы можете поиграть с шириной, чтобы получить различные размеры часовых линий.
источник
Я сделал скрипку которая использует FlexBox, а также даст вам разные стили HR (двойная линия, символы в центре линии, тень, вставка, пунктир и т. Д.).
CSS
HTML
Или вот интерактивная скрипка: http://jsfiddle.net/mpyszenj/439/
источник
Вы можете попытаться сделать
fieldset
и выровнять элемент "legend" (текст "вашего следующего раздела") по центру поля с помощью толькоborder-top
set. Я не уверен в том, как легенда расположена в соответствии с элементом fieldset. Я думаю, это может быть простоmargin: 0px auto
сделать трюк, хотя.пример :
источник
Вы можете сделать это без
<hr />
. Семантически дизайн должен быть выполнен с помощью CSS, в этом случае это вполне возможно.источник
Там всегда старый добрый FIELDSET
источник
HTML
CSS
источник
CSS
HTML
Вы можете изменить ширину в классе "side" и "middle" в зависимости от длины вашего текста в теге "span". Убедитесь, что ширина "середины" плюс 2 раза ширина "стороны" равна 100%.
источник
Отзывчивый, прозрачный фон, переменная высота и стиль разделителя, переменное положение текста, регулируемое расстояние между разделителем и текстом. Может также применяться несколько раз с разными селекторами для нескольких стилей делителей в одном проекте.
СССН ниже.
Разметка (HTML):
CSS :
Без
text-position
него по умолчанию центр.Демо-версия:
Показать фрагмент кода
И SCSS , чтобы изменить это быстро:
скрипку здесь .
источник
источник
источник