Пользовательский <hr> с изображением / символом в центре

Я хотел бы воссоздать это горизонтальное правило:

У меня есть двойные линии, но я не уверен, как получить какой-нибудь персонаж или изображение в центре. Я думаю, что мог бы использовать: до и после, но я не знаю, как использовать их в этом случае. Чтобы ответить на вопрос, давайте просто попробуем сделать так, чтобы центральный персонаж был персонажем. Я выясню изображение / значок позже.

Идеи? Вот мой код для строк:

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #444;
    border-bottom:1px solid #444;
    margin:25px 0px;
}
Источник

4 ответа

Решение

Вот скриншот того, что я смог произвести. Посмотрите это в действии на jsfiddle.net.

Скриншот CSS

А вот и CSS:

body {
  background: #454545;
}

hr {
  font-family: Arial, sans-serif; /* choose the font you like */
  text-align: center; /* horizontal centering */
  line-height: 1px; /* vertical centering */
  height: 1px; /* gap between the lines */
  font-size: 1em; /* choose font size you like */
  border-width: 1px 0; /* top and bottom borders */
  border-style: solid;
  border-color: #676767;
  margin: 20px 10px; /* 20px space above/below, 10px left/right */
  overflow: visible;

  /* ensure 1px gap between borders */
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  -o-box-sizing: content-box;
  box-sizing: content-box;
}

hr:after {
  content: "§"; /* section sign */
  color: #999;
  display: inline; /* for vertical centering and background knockout */
  background-color: #454545; /* same as background color */
  padding: 0 0.5em; /* size of background color knockout */
}

/* opera doesn't render correctly. hide section sign */
x:-o-prefocus, hr:after {
  content: "";
}

Знак раздела

Чтобы добавить знак раздела, вы можете использовать сгенерированный контент с :before или же :after, Остальные хитрые части - это горизонтальное центрирование, вертикальное центрирование и выбивание границ.

Горизонтальное центрирование

Горизонтальное центрирование так же просто, как добавление text-align: center к hr и убедитесь, что сгенерированный контент display: inline,

Вертикальное центрирование

Вертикальное центрирование требует небольшого знания встроенного рендеринга. Вертикальное пространство, занимаемое строкой текста, определяется line-height, Даже если line-height намного меньше, чем размер отображаемого символа, символ по-прежнему отображается в натуральную величину, но занимаемое им пространство определяется line-height, С помощью line-height: 1px достигается вертикальное центрирование.

Выбивая границы

Наконец, единственный известный мне способ выбить границы за знаком раздела - это закрасить их другим цветом. В этом случае мы используем тот же цвет фона, что и на остальной части документа, поэтому он, кажется, сливается. Установите соответствующий background-color а затем используйте левую и правую padding контролировать, сколько места находится по обе стороны от знака раздела.

1px разрыв между границами

Вы также заметите, что я устанавливаю box-sizing: content-box, Это должно гарантировать, что разрыв между границами составляет 1px. (Альтернативная, но эквивалентная установка будет box-sizing: border-box; height: 3px;.)

Ошибка рендеринга в Opera

@cimmanon указал на некоторые ошибки рендеринга в Opera, поэтому я решил изящно ухудшить качество и не показывать знак раздела. Я думаю, что показ только линий все еще выглядит очень опрятным и профессиональным. Если вы действительно хотите, чтобы это работало в Opera, вы можете использовать другую разметку, например <div class="hr"></div> (и, конечно, обновить CSS, чтобы соответствовать).

Источник

Вот то, что я считаю самой отзывчивой, легкой и современной версией, когда символ не является шрифтом.

отрывок

hr.hr--logo {
  border-top: solid #000 1px;
  margin: 50px 0;
}
hr.hr--logo:after {
  content: url( 'logogram.svg' );
  /* Controls the position of the logo */
  left: 50%;
  position: absolute;
  transform: translateY(-50%) translateX(-50%);
  /* Controls the whitespace around the symbol */
  padding: 20px;
  background: #fff;
}
<hr class="hr--logo">

Источник

Так как у вас уже есть некоторые CSS, вы можете задать им фоновое изображение и высоту:

hr {
    ... your css ...
    background:url(path to your image) no-repeat center;
    height:15px;
}
Источник

Это глупо, но вы можете попробовать сделать два HR половинной ширины с неразрывным пробелом и изображением между ними.

<hr><img><hr>

где между тегами нет пробелов или разрывов строк.

Источник
Другие вопросы по тегам