CSS-Technik für eine horizontale Linie mit Wörtern in der Mitte

Question

Ich versuche, eine horizontale Linie mit etwas Text in der Mitte zu erstellen. Zum Beispiel:

----------------------------------- mein Titel hier -----------------------------

Gibt es eine Möglichkeit, dies in CSS zu tun? Natürlich ohne die ganzen "-"-Bindestriche.

Answer 1

bearbeiten (09/2020)

display:flex Methode scheint heute die solideste und am einfachsten umzusetzende zu sein.

---

Schrieb 17. März '15 um 17:06 Uhr:

für spätere (heutige) Browser, display:flex y pseudo-elements macht es einfach, ohne zusätzliche Markierungen zu zeichnen.

border-style , box-shadow und sogar background hilft auch für das Make-up, wenn Sie es schick oder hässlich brauchen.

h1 {margin-top:50px;
  display:flex;
  background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h1:before, h1:after {
  color:white;
  content:'';
  flex:1;
  border-bottom:groove 2px;
  margin:auto 0.25em;
  box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */
}

<h1>side lines via flex</h1>

Ressource (hinzugefügt 09/2020) :

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (siehe flex / flex-grow hier verwendet)

• https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/ ( margin:auto 0.25em; hier verwendet )

Answer 2

   <div class="flex items-center">
      <div class="flex-grow bg bg-gray-300 h-0.5"></div>
      <div class="flex-grow-0 mx-5 text dark:text-white">or</div>
      <div class="flex-grow bg bg-gray-300 h-0.5"></div>
   </div>

Für alle Rückenwind-Liebhaber da draußen. Inspiriert von der Antwort von WellSpring

Answer 3

.hr-sect {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: rgba(0, 0, 0, 0.35);
    margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
    content: "";
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.35);
    height: 1px;
    font-size: 0px;
    line-height: 0px;
    margin: 0px 8px;
}

<div class="hr-sect">Text</div>

Answer 4

Ich denke, der einfachste Weg ist die Verwendung von CSS-Gittern.

h1 {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
}

h1::before,
h1::after {
  content: "";
  border-top: 0.1rem double black;
  align-self: center;
}

<h1>Heading<h2>

Answer 5

<div><span>text TEXT</span></div>

div { 
  height: 1px; 
  border-top: 1px solid black; 
  text-align: center; 
  position: relative; 
}
span { 
  position: relative; 
  top: -.7em; 
  background: white; 
  display: inline-block; 
}

Geben Sie der Spanne eine Auffüllung, um mehr Platz zwischen dem Text und der Zeile zu schaffen.

Beispiel: http://jsfiddle.net/tUGrf/