черная линия слева и справа от текста [копия]

Question

черная линия слева и справа от текста [копия]

0

Я хотел бы поместить черную линию в левую и правую сторону заголовка, чтобы она выглядела так:

-------------------- Красивый текст ---------------------------

содержание bla bla blab содержание bla bla blab содержание bla
содержание bla bla blab содержание bla bla blab содержание bla
содержание bla bla blab содержание bla bla blab содержание bla
содержание bla bla blab содержание bla bla blab содержание bla

Надеюсь, вы знаете, что я имею в виду.

Какой лучший способ сделать это? Я могу добиться этого, предоставив h1 отрицательную верхнюю позицию и белый фон, установив содержимое div с черной рамкой сверху. Итак, заголовок (с белым фоном) накладывает мою черную границу.

Но я уверен, что там лучше, чем работать с отрицательным позиционированием.

DanielAsking 23 март 2014, в 20:26

Источник

0

На вопрос "Как лучше всего сделать X?" всегда предоставлять контекст и объяснять проблемы с вашим текущим решением.
Wesley Murch 23 март 2014, в 19:22
0

Смотрите мой ответ ниже. jsfiddle.net/jYW4n/22/show Линия находится прямо в середине по вертикали.
JohanVdR 23 март 2014, в 19:44

Теги:

html

css

3 ответа

1

вы можете использовать псевдоэлемент в абсолютной позиции и отрицательном поле: базовая одна строка:

http://codepen.io/gc-nomade/pen/FzjiD/

h1 {
  margin:0 1em;
  position:relative;/*here triggers overflow since no width is given */
  overflow:hidden;
  text-align:center;
}
h1:after , h1:before{
  content:'';
  margin-top:0.5em;
  height:0;
  border-top:groove 2px;
  width:100%;
  position:absolute;
  margin-right:-100%;/* reduce size virtually to zero at 100% */
  margin-left:1%;/* set margin from end  text */
}
h1:before{
  margin-left:-101%;/* reduce size virtually to zero at 100% + give margin from begin text */
}

Для многострочных линий:

http://codepen.io/gc-nomade/pen/uLynl/ вам нужно установить top координаты, чтобы они находились в вертикальном положении; и оберните текст в встроенный ящик, чтобы не накладывать его. http://codepen.io/gc-nomade/pen/qhEro/

G-Cyr 23 март 2014, в 18:27

0

Также отлично работает. Смотрите мой форк: codepen.io/anon/pen/GvHaF. Вы можете поместить его вертикально по центру, используя top: 50%; + margin-top: - [borderwidth] px
JohanVdR 23 март 2014, в 19:53
0

Единственная проблема, которая случится с заголовками-заглушками, это сломает.
JohanVdR 23 март 2014, в 19:56
0

Ответ @JohanVandenRym обновлен, см. 2 вилки начального пера и объясните, как это работает
G-Cyr 23 март 2014, в 20:09
0

Это должно работать также без добавления <br> к тексту, как здесь: jsfiddle.net/37KQS/4/show
JohanVdR 23 март 2014, в 20:16
0

? затем, очевидно, вам нужно установить ширину или максимальную ширину, чтобы охватить ее, или, по крайней мере, некоторые горизонтальные отступы до h1, чтобы уменьшить ширину, доступную для текста, который выкладывается
G-Cyr 23 март 2014, в 20:20
0

Это будет иметь место, когда заголовок находится в столбчатой компоновке, заголовок может иметь несколько строк.
JohanVdR 23 март 2014, в 20:22
0

ваша скрипка показывает линию на всем протяжении, когда вы изменяете высоту окна, это должно быть? (Я могу предоставить снимок экрана, если вам интересно) i.stack.imgur.com/B9Nml.jpg
G-Cyr 23 март 2014, в 20:26
0

i.stack.imgur.com/B9Nml.jpg измените размер вашего фрейма по высоте в скрипке :) jsfiddle.net/37KQS/4, лекарство от дисплея: inline-block на span jsfiddle.net/37KQS/5
G-Cyr 23 март 2014, в 20:30
0

В каком браузере вы видите это, он работает нормально, так как промежуток с центром в середине имеет белый фон, который закрывает горизонтальную линию. Очень странно.
JohanVdR 23 март 2014, в 20:32
0

используйте другой цвет, чтобы показать фон span, чтобы понять, о чем я говорю, браузеры используют другой размер шрифта, семейство шрифтов и высоту строки, если не установлено :)
G-Cyr 23 март 2014, в 20:33
0

Я вижу это сейчас на Chrome.
JohanVdR 23 март 2014, в 20:36
0

встроенный блок добавляет пробел
JohanVdR 23 март 2014, в 20:39
0

да :), кроме того, я бы построил это так jsfiddle.net/37KQS/6 , чтобы избежать линии к разочарованию позади фона, если h1, как любой jsfiddle.net/37KQS/10
G-Cyr 23 март 2014, в 20:40
0

Исправлена проблема пробелов fiddle.jshell.net/MF4WP/3/show
JohanVdR 23 март 2014, в 20:44
0

спасибо за z-индекс: -1; Дело в том, что есть исправление, чтобы вернуть псевдолинии обратно в вид jsfiddle.net/37KQS/11 имеет этот забавный эффект и способ исправить это;) работает лучше в любом браузере, если span имеет макет jsfiddle.net/37KQS/13
G-Cyr 23 март 2014, в 20:46
0

Ваша техника с моим размахом: codepen.io/anon/pen/syJgt
JohanVdR 23 март 2014, в 21:29
0

хе, вы не сбрасываете размер шрифта, если span это inline-block? codepen.io/gc-nomade/pen/gucto еще один, здесь жив, codepen.io/gc-nomade/pen/Djhkd, я буду в следующие часы :)
G-Cyr 23 март 2014, в 21:39

Показать ещё 15 комментариев

0

Я не уверен, что это лучший способ, но это, безусловно, простой способ добиться этого:

Код HTML:

<hr class="headingrule" /><span id="heading">text</span><hr class="headingrule" />

Код CSS:

.headingrule {
    float: left;
    width: 40%;
}

#heading {
    float: left;
}

JSFiddle.

Chirag Bhatia - chirag64 23 март 2014, в 16:36

Ещё вопросы

На вопрос "Как лучше всего сделать X?" всегда предоставлять контекст и объяснять проблемы с вашим текущим решением.
Смотрите мой ответ ниже. jsfiddle.net/jYW4n/22/show Линия находится прямо в середине по вертикали.
Также отлично работает. Смотрите мой форк: codepen.io/anon/pen/GvHaF. Вы можете поместить его вертикально по центру, используя top: 50%; + margin-top: - [borderwidth] px
Единственная проблема, которая случится с заголовками-заглушками, это сломает.
Ответ @JohanVandenRym обновлен, см. 2 вилки начального пера и объясните, как это работает
Это должно работать также без добавления <br> к тексту, как здесь: jsfiddle.net/37KQS/4/show
? затем, очевидно, вам нужно установить ширину или максимальную ширину, чтобы охватить ее, или, по крайней мере, некоторые горизонтальные отступы до h1, чтобы уменьшить ширину, доступную для текста, который выкладывается
Это будет иметь место, когда заголовок находится в столбчатой компоновке, заголовок может иметь несколько строк.
ваша скрипка показывает линию на всем протяжении, когда вы изменяете высоту окна, это должно быть? (Я могу предоставить снимок экрана, если вам интересно) i.stack.imgur.com/B9Nml.jpg
i.stack.imgur.com/B9Nml.jpg измените размер вашего фрейма по высоте в скрипке :) jsfiddle.net/37KQS/4, лекарство от дисплея: inline-block на span jsfiddle.net/37KQS/5
В каком браузере вы видите это, он работает нормально, так как промежуток с центром в середине имеет белый фон, который закрывает горизонтальную линию. Очень странно.
используйте другой цвет, чтобы показать фон span, чтобы понять, о чем я говорю, браузеры используют другой размер шрифта, семейство шрифтов и высоту строки, если не установлено :)
встроенный блок добавляет пробел
да :), кроме того, я бы построил это так jsfiddle.net/37KQS/6 , чтобы избежать линии к разочарованию позади фона, если h1, как любой jsfiddle.net/37KQS/10
Исправлена проблема пробелов fiddle.jshell.net/MF4WP/3/show
спасибо за z-индекс: -1; Дело в том, что есть исправление, чтобы вернуть псевдолинии обратно в вид jsfiddle.net/37KQS/11 имеет этот забавный эффект и способ исправить это;) работает лучше в любом браузере, если span имеет макет jsfiddle.net/37KQS/13
Ваша техника с моим размахом: codepen.io/anon/pen/syJgt
хе, вы не сбрасываете размер шрифта, если span это inline-block? codepen.io/gc-nomade/pen/gucto еще один, здесь жив, codepen.io/gc-nomade/pen/Djhkd, я буду в следующие часы :)

JohanVdR · Accepted Answer · 2014-03-23T17-57-00.000Z

http://fiddle.jshell.net/MF4WP/4/
http://fiddle.jshell.net/MF4WP/4/show

<h1><span>My heading has a line through it.</span></h1>

Требуется дополнительный интервал. Работает также с многострочными заголовками:
См. Пример здесь:
http://fiddle.jshell.net/aZ4tr/6/show
http://fiddle.jshell.net/aZ4tr/6/

 h1 {
    color: gray;
    font-size: 0; /* fixes white-space issue SPAN */
    font-family:Helvetica;
    text-align: center;
    display: block;
    padding: 0 10px;
    position: relative;
}
h1:before {
  content: '';
  height: 1px;
  width: 100%;
  background: gray;
  position:absolute;
  z-index: -1;
  left: 0;
  top: 50%;
  margin-top: -1px;
}
h1 span {
    background: #fff;
    display: inline-block;
    font-size: 28px;  
}