Техника CSS для горизонтальной линии со словами в середине - PullRequest
Новая
       1

Техника CSS для горизонтальной линии со словами в середине

240 голосов
/ 07 марта 2011

Я пытаюсь создать горизонтальное правило с текстом в середине. Например:

----------------------------------- мой заголовок здесь --------- --------------------

Есть ли способ сделать это в CSS? Без всех черточек "-", очевидно.

Ответы [ 19 ]

3 голосов
/ 19 марта 2017

Это дает статическую ширину линии, но прекрасно работает. Ширина линии контролируется путем добавления или взятия '\ 00a0' (пробел в юникоде). 

h1:before, h1:after {
  content:'\00a0\00a0\00a0\00a0';
  text-decoration: line-through;
  margin: auto 0.5em;
}
<h1>side lines</h1>
2 голосов
/ 13 декабря 2016

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

enter image description here

  • нет жестко заданных размеров
  • нет изображений
  • без псевдоэлементов
  • уважает фон
  • Внешний вид панели управления

https://jsfiddle.net/eq5gz5xL/18/

Я обнаружил, что немного ниже истинного центра лучше всего смотрится с текстом; это можно отрегулировать там, где 55% (чем выше высота, тем ниже планка). Внешний вид линии можно изменить там, где border-bottom.

HTML: 

<div class="title">
  <div class="title-row">
    <div class="bar-container">
      <div class="bar"></div>
    </div>
    <div class="text">
      Title
    </div>
    <div class="bar-container">
      <div class="bar"></div>
    </div>
  </div>
</div>

CSS: 

.title{
  display: table;
  width: 100%
  background: linear-gradient(to right, white, lightgray);
}
.title-row{
  display: table-row;
}
.bar-container {
  display: table-cell;
  position: relative;
  width: 50%;
}
.bar {
  position: absolute;
  width: 100%;
  top: 55%;
  border-bottom: 1px solid black;
}
.text {
  display: table-cell;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 36px;
}
2 голосов
/ 11 марта 2016 
h6 {
    font: 14px sans-serif;
    margin-top: 20px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
}

    h6.background {
        position: relative;
        z-index: 1;
        margin-top: 0%;
        width:85%;
        margin-left:6%;
    }

        h6.background span {
            background: #fff;
            padding: 0 15px;
        }

        h6.background:before {
            border-top: 2px solid #dfdfdf;
            content: "";
            margin: 0 auto; /* this centers the line to the full width specified */
            position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
            top: 50%;
            left: 0;
            right: 0;
            bottom: 0;
            width: 95%;
            z-index: -1;
        }

это вам поможет


между строк
2 голосов
/ 27 июня 2015

Если кому-то интересно, как установить заголовок так, чтобы он отображался с фиксированным расстоянием до левой стороны (а не по центру, как показано выше), я понял это, изменив код @ Puigcerber. 

h1 {
  white-space: nowrap;
  overflow: hidden;
}

h1:before, 
h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
}

h1:before {
  right: 0.3em;
  width: 50px;
}

h1:after {
  left: 0.3em;
  width: 100%;
}

Здесь JSFiddle .

0 голосов
/ 03 июля 2019
  • Создано маленькое изображение 1x18 с одной цветной точкой # e0e0e0
  • Преобразует изображение в код base64

Результат: 

body
{
  background: #c0c0c0;
}

#block_with_line
{
  width: 100%;
  position: relative;
  height: 18px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAASAQMAAACgmSb/AAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAZQTFRFAAAA4ODg8vF4+wAAAAJ0Uk5TAP9bkSK1AAAAEElEQVR4nGNgQAMN6AIMDAAJpACBAQttyAAAAABJRU5ErkJggg==');
}

#block_with_line span
{
  background: #e4e4e4;
  width: 150px;
  display: block;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  margin-left: -75px;
  text-align: center
}
<body>
  <div id="block_with_line">
    <span>text</span>
  </div>
</body>
0 голосов
/ 07 ноября 2018

Для меня это решение прекрасно работает ...

HTML

<h2 class="strikethough"><span>Testing Text</span></h2>

CSS 

.strikethough {
 width:100%; 
 text-align:left; 
 border-bottom: 1px solid #bcbcbc; 
 overflow: inherit;
 margin:0px 0 30px;
 font-size: 16px;
 color:#757575;
 }
.strikethough span {
 background:#fff; 
 padding:0 20px 0px 0px;
 position: relative;
 top: 10px;
}
0 голосов
/ 07 марта 2011

Я не слишком уверен, но вы можете попробовать использовать горизонтальное правило и поместить текст над его верхним полем.Вам понадобится фиксированная ширина тега абзаца и фон.Это немного странно, и я не знаю, будет ли это работать во всех браузерах, и вам нужно установить отрицательное поле в зависимости от размера шрифта.Работает на Chrome, хотя.

<style>   
 p{ margin-top:-20px; background:#fff; width:20px;}
</style>

<hr><p>def</p>
0 голосов
/ 05 мая 2018

Не побить мертвого коня, но я искал решение, попал сюда и сам не был удовлетворен вариантами, не в последнюю очередь по какой-то причине я не смог заставить предоставленные здесь решения работать хорошодля меня.(Вероятно, из-за ошибок с моей стороны ...) Но я играл с flexbox, и вот кое-что, что я заработал для себя.

Некоторые из настроек являются аппаратными, но только для целейдемонстрации.Я думаю, что это решение должно работать практически в любом современном браузере.Просто удалите / настройте фиксированные настройки для класса .flex-parent, настройте цвета / текст / материал и (я надеюсь) вы будете так же счастливы, как и я, с этим подходом.

HTML: 

.flex-parent {
  display: flex;
  width: 300px;
  height: 20px;
  align-items: center;
}

.flex-child-edge {
  flex-grow: 2;
  height: 1px;
  background-color: #000;
  border: 1px #000 solid;
}
.flex-child-text {
  flex-basis: auto;
  flex-grow: 0;
  margin: 0px 5px 0px 5px;
  text-align: center;
}
<div class="flex-parent">
  <div class="flex-child-edge"></div>
  <div class="flex-child-text">I found this simpler!</div>
  <div class="flex-child-edge"></div>
</div>

Я также сохранил свое решение здесь: https://jsfiddle.net/Wellspring/wupj1y1a/1/

0 голосов
/ 20 декабря 2016

Я испробовал большинство предложенных способов, но заканчивается некоторыми проблемами, такими как полная ширина или Не подходит для динамического содержимого. Наконец я изменил код, и работает отлично. Этот пример кода будет рисовать эти линии до и после, и он гибок в изменении содержимого. Центр тоже выровнен.

HTML 

        <div style="text-align:center"> 
            <h1>
                <span >S</span>
            </h1> 
        </div> 

        <div style="text-align:center"> 
            <h1>
                <span >Long text</span>
            </h1> 
        </div>

CSS 

      h1 {
            display: inline-block;
            position: relative;
            text-align: center;
        }

        h1 span {
            background: #fff;
            padding: 0 10px;
            position: relative;
            z-index: 1;
        }

        h1:before {
            background: #ddd;
            content: "";
            height: 1px;
            position: absolute;
            top: 50%;
            width: calc(100% + 50px);//Support in modern browsers
            left: -25px;
        }

        h1:before {
            left: ;
        }

Результат: https://jsfiddle.net/fasilkk/vowqfnb9/

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...