CSS technique for a horizontal line with words in the middle

Question

I m trying to make a horizontal rule with some text in the middle  For example   ----------------------------------- my title here -----------------------------  Is there a way to do that in CSS  Without all the  -  dashes obviously

User · Answer

Just in case anyone wants to  IMHO the best solution using CSS is by a flexbox   Here is an example    x000D   x000D   kw-dvp-HorizonalButton   x000D      color   0078d7  x000D      display flex  x000D      flex-wrap nowrap  x000D      align-items center  x000D    x000D   kw-dvp-HorizonalButton before   kw-dvp-HorizonalButton after   x000D      background-color   0078d7  x000D      content      x000D      display  inline-block  x000D      float left  x000D      height 1px  x000D    x000D   kw-dvp-HorizonalButton before   x000D      order 1  x000D      flex-grow 1  x000D      margin-right 8px  x000D    x000D   kw-dvp-HorizonalButton after   x000D      order  3  x000D      flex-grow  1  x000D      margin-left  8px  x000D    x000D   kw-dvp-HorizonalButton     x000D      order  2  x000D    x000D       lt div class  kw-dvp-HorizonalButton  gt  x000D           lt span gt hello lt  span gt  x000D       lt  div gt  x000D   x000D   x000D    This should always result in a perfectly centered aligned content with a line to the left and right  with an easy to control margin between the line and your content   It creates a line element before and after your top control and set them to order 1 3 in your flex container while setting your content as order 2  go in the middle   giving the before after a grow of 1 will make them consume the most vacant space equally while keeping your content centered   Hope this helps

User · Answer

edit  09 2020  display flex method seems to be today the most solid and easiest to set in action   Wrote  Mar 17  15 at 17 06  for later nowdays   browser   display flex and pseudo-elements  makes it easy to draw without extra markup  border-style  box-shadow and even background helps too for the makeup if you need it fancy or ugly    x000D   x000D  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      x000D   lt h1 gt side lines via flex lt  h1 gt  x000D   x000D   x000D   ressource  added 09 2020    https   css-tricks com snippets css a-guide-to-flexbox   see flex flex-grow used here   https   css-tricks com the-peculiar-magic-of-flexbox-and-auto-margins   margin auto 0 25em  used here

User · Answer

People who are using Bootstrap 4 can achieve with this method  classes mentioned in HTML code are from Bootstrap 4   h1       position  relative      flex-grow  1      margin  0     h1 before      content         display  block     border-top  solid 2px blue     width  100      height  1px     position  absolute     top  50      z-index  1      h1 span      background   fff     left  12      padding  0 15px     position  relative     z-index  5       And write your HTML like this   lt div class  d-flex flex-row align-items-center  gt     lt h1 gt  lt span gt  Title  lt  span gt   lt  h1 gt   lt  div gt

User · Answer

If you are using React with Styled Components  I found that is more easy to just separate elements  Is not the  quot amazing solution quot  but it works  import React from  react   import styled from  quot  emotion styled quot    const Container   styled div    padding-top  210px    padding-left  50px      display  inline-flex     const Title1   styled div    position  absolute    font-size  25px    left 40px    color  white    margin-top  -17px    padding-left  40px     const Title2   styled div    position  absolute    font-size  25px    left 1090px    color  white    margin-top  -17px    padding-left  40px     const Line1   styled div    width  20px    border  solid darkgray 1px    margin-right  90px    const Line2   styled div    width  810px    border  solid darkgray 1px    margin-right  126px    const Line3   styled div    width  178px    border  solid darkgray 1px      const Titulos        gt        return            lt Container gt               lt Line1  gt               lt Title1 gt                  FEATURED              lt  Title1 gt               lt Line2  gt               lt Line1  gt               lt Title2 gt                  EXCLUSIVE              lt  Title2 gt               lt Line3  gt           lt  Container gt             export default Titulos   Result

User · Answer

If anyone is wondering how to set the heading such that it appears with a fixed distance to the left side  and not centered as presented above   I figured that out by modifying  Puigcerber s code   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       Here the JSFiddle

User · Answer

For me this solution works perfectly fine     HTML   lt h2 class  strikethough  gt  lt span gt Testing Text lt  span gt  lt  h2 gt   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

User · Answer

After trying different solutions  I have come with one valid for different text widths  any possible background and without adding extra markup     x000D   x000D  h1   x000D    overflow  hidden  x000D    text-align  center  x000D    x000D   x000D  h1 before  x000D  h1 after   x000D    background-color   000  x000D    content      x000D    display  inline-block  x000D    height  1px  x000D    position  relative  x000D    vertical-align  middle  x000D    width  50   x000D    x000D   x000D  h1 before   x000D    right  0 5em  x000D    margin-left  -50   x000D    x000D   x000D  h1 after   x000D    left  0 5em  x000D    margin-right  -50   x000D    x000D   lt h1 gt Heading lt  h1 gt  x000D   lt h1 gt This is a longer heading lt  h1 gt  x000D   x000D   x000D    I tested it in IE8  IE9  Firefox and Chrome  You can check it here http   jsfiddle net Puigcerber vLwDf 1

User · Answer

x000D   x000D   hr-sect   x000D   display  flex  x000D   flex-basis  100   x000D   align-items  center  x000D   color  rgba 0  0  0  0 35   x000D   margin  8px 0px  x000D    x000D   hr-sect  before  x000D   hr-sect  after   x000D   content      x000D   flex-grow  1  x000D   background  rgba 0  0  0  0 35   x000D   height  1px  x000D   font-size  0px  x000D   line-height  0px  x000D   margin  0px 8px  x000D    x000D   lt div class  hr-sect  gt Text lt  div gt  x000D   x000D   x000D

User · Answer

Horizontal and Vertical line with words in the middle   x000D   x000D   box  x000D      background-image  url  https   i stack imgur com N39wV jpg    x000D      width  350px  x000D      padding  10px  x000D    x000D   x000D    begin first box   x000D   first  x000D      width  300px  x000D      height  100px  x000D      margin  10px  x000D      border-width  0 2px 0 2px  x000D      border-color  red  x000D      border-style  solid  x000D      position  relative  x000D    x000D   x000D   first span   x000D      position  absolute  x000D      display  flex  x000D      right  0  x000D      left  0  x000D      align-items  center  x000D    x000D   first  foo  x000D      top  -8px  x000D    x000D   first  bar  x000D      bottom  -8 5px  x000D    x000D   first span before  x000D      margin-right  15px  x000D    x000D   first span after   x000D      margin-left  15px  x000D    x000D   first span before    first span after   x000D      content       x000D      height  2px  x000D      background  red  x000D      display  block  x000D      width  50   x000D    x000D   x000D   x000D    begin second box   x000D   second  x000D      width  300px  x000D      height  100px  x000D      margin  10px  x000D      border-width  2px 0 2px 0  x000D      border-color  red  x000D      border-style  solid  x000D      position  relative  x000D    x000D   x000D   second span   x000D      position  absolute  x000D      top  0  x000D      bottom  0  x000D      display  flex  x000D      flex-direction  column  x000D      align-items  center  x000D    x000D   second  foo  x000D      left  -15px  x000D    x000D   second  bar  x000D      right  -15 5px  x000D    x000D   second span before  x000D      margin-bottom  15px  x000D    x000D   second span after   x000D      margin-top  15px  x000D    x000D   second span before    second span after   x000D      content       x000D      width  2px  x000D      background  red  x000D      display  block  x000D      height  50   x000D    x000D   lt div class  box  gt  x000D       lt div class  first  gt  x000D           lt span class  foo  gt FOO lt  span gt  x000D           lt span class  bar  gt BAR lt  span gt  x000D       lt  div gt  x000D   x000D      lt br gt  x000D   x000D       lt div class  second  gt  x000D           lt span class  foo  gt FOO lt  span gt  x000D           lt span class  bar  gt BAR lt  span gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    This is also answered in https   stackoverflow com a 57279326 6569224

User · Answer

lt div gt  lt span gt text TEXT lt  span gt  lt  div gt   div      height  1px     border-top  1px solid black     text-align  center     position  relative     span      position  relative     top  - 7em     background  white     display  inline-block       Give the span a padding to make more space between the text and the line   Example  http   jsfiddle net tUGrf

User · Answer

No pseudo-element  no additional element  Only single div  I used some CSS variables to control easily   x000D   x000D  div     --border-height  2px    --border-color   000    background  linear-gradient var --border-color  var --border-color   0  50   calc 50  -  var --space    2   var --border-height                 linear-gradient var --border-color  var --border-color   100  50   calc 50  -  var --space    2   var --border-height     background-repeat no-repeat    text-align center    x000D   lt div style  --space  100px  gt Title lt  div gt   lt div style  --space  50px --border-color  red --border-height 1px   gt Title lt  div gt   lt div style  --space  150px --border-color  green   gt Longer Text lt  div gt  x000D   x000D   x000D   But the above method is not dynamic  You have to change the --space variable according to the text length

User · Answer

Shortest and best method    x000D   x000D  span after  x000D  span before  x000D      content   00a0 00a0 00a0 00a0 00a0   x000D      text-decoration line-through  x000D    x000D   lt span gt  your text  lt  span gt  x000D   x000D   x000D

User · Answer

This code will work properly   x000D   x000D                   div-live       text-align  center     span-live       display  inline-block      color   b5b5b5        span-live before   span-live after       border-top  1px solid  b5b5b5      display  block      height  1px      content           width  30       position  absolute      left  0      top  3rem       span-live after      right  0     left  auto    x000D     lt div class  div-live  gt               lt span class  span-live  gt          lt  span gt        lt  div gt  x000D   x000D   x000D

User · Answer

Ok  this one is more complicated but it works in everything but IE lt 8   lt div gt  lt span gt text TEXT lt  span gt  lt  div gt   div       text-align  center      position  relative    span       display  inline-block        span before  span after       border-top  1px solid black      display  block      height  1px      content           width  40       position  absolute      left  0      top  1 2em    span after      right  0       left  auto       The  before and  after elements are positioned absolutely so we can pull one to the left and one to the right  Also  the width  40  in this case  is very dependent of the width of the text inside   have to think about a solution for that  At least the top  1 2em makes sure the lines stay more or less in the center of the text even if you have different font size   It does seem to work well though  http   jsfiddle net tUGrf 3

User · Answer

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              this will help you  between line

User · Answer

I am not too sure  but you could try using a horizontal rule and pushing the text above its top margin  You will need a fixed width on your paragraph tag and a background too  It s a little hacky and I don t know if it will work on all browsers  and you need to set the negative margin based on the size of the font  Works on chrome though       lt style gt      p  margin-top -20px  background  fff  width 20px    lt  style gt    lt hr gt  lt p gt def lt  p gt

User · Answer

This gives you fixed length for the lines  but works great  The lines lengths are controlled by adding or taking   00a0   unicode space       x000D   x000D  h1 before  h1 after   x000D    content   00a0 00a0 00a0 00a0   x000D    text-decoration  line-through  x000D    margin  auto 0 5em  x000D    x000D   lt h1 gt side lines lt  h1 gt  x000D   x000D   x000D

User · Answer

I went for a simpler approach  HTML  lt div class  quot box quot  gt     lt h1 class  quot text quot  gt OK THEN LETS GO lt  h1 gt     lt hr class  quot line quot    gt   lt  div gt   CSS  box     align-items  center    background   ff7777    display  flex    height  100vh    justify-content  center      line     border  5px solid white    display  block    width  100vw      text     background   ff7777    color  white    font-family  sans-serif    font-size  2 5rem    padding  25px 50px    position  absolute     Result

User · Answer

Solution for IE8 and newer     Issues worth noting   Using background-color to mask a border might not be the best solution  If you have a complex  or unknown  background color  or image   masking will ultimately fail  Also  if you resize the text  you ll notice that white background color  or whatever you set  will start covering up the text on the line above  or below    You also don t want to  guesstimate  how wide the the sections are either  because it makes the styles very inflexible and almost impossible to implement on a responsive site where the width of the content is changing    Solution    View JSFiddle   Instead of  masking  a border with a background-color  use your display property   HTML   lt div class  group  gt       lt div class  item line  gt  lt  div gt       lt div class  item text  gt This is a test lt  div gt       lt div class  item line  gt  lt  div gt   lt  div gt    CSS   group   display  table  width  100      item   display  table-cell     text   white-space  nowrap  width  1   padding  0 10px     line   border-bottom  1px solid  000  position  relative  top  - 5em      Resize your text by placing your font-size property on the  group element   Limitations    No multi-line text   Single lines only  HTML markup isn t as elegant top property on  line element needs to be half of line-height  So  if you have a line-height of 1 5em  then the top should be - 75em  This is a limitation because it s not automated  and if you are applying these styles on elements with different line-heights  then you might need to reapply your line-height style    For me  these limitations outweigh the  issues  I noted at the beginning of my answer for most implementations

User · Answer

I ve been looking around for some solutions for this simple decoration and I ve found quite a few ones  some weird  some even with JS to calculate the height of the font and bla bla bla  then I ve read the one on this post and read a comment from thirtydot speaking about     fieldset and legend and I thought that was it   I m overriding those 2 elements styles  I guess you could copy the W3C standards for them and include it on your  middle-line-text class  or whatever you want to call it  but this is what I did    lt fieldset class  featured-header  gt       lt legend gt Your text goes here lt  legend gt   lt  fieldset gt    lt style gt   featured-header      border-bottom  none      border-left  none      border-right  none      text-align  center       featured-header legend      -webkit-padding-start  8px     It sets the whitespace between the line and the text        -webkit-padding-end  8px       background  transparent      It s cool because you don t need to fill your bg-color as you would need to in some of the other examples that you can find           font-weight  normal     I preffer the text to be regular instead of bold         color  YOU CHOOSE         lt  style gt    Here s the fiddle  http   jsfiddle net legnaleama 3t7wjpa2   I ve played with the border styles and it also works in Android     Tested on kitkat 4 XX   EDIT   Following Bekerov Artur s idea which is a nice option too  I ve changed the  png base64 image to create the stroke with an  SVG so you can render in any resolution and also change the colour of the element without any other software involved        SVG solution based on Bekerov Artur       Flexible solution  scalable  adaptable and also color customizable    stroke   background-image  url  data image svg xml utf8  lt svg xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  x  0px  y  0px  width  1px  height  1px  viewBox  0 0 1 1  enable-background  new 0 0 1 1  fill   23ff6600  xml space  preserve  gt  lt rect width  1  height  1   gt  lt  svg gt     background-repeat  repeat-x  background-position  left  text-align  center     stroke h3   background-color   ffffff  margin  0 auto  padding 0 10px  display  inline-block  font-size  66px

User · Answer

I have tried most of the ways suggested but ends with some problems like full width  or Not suitable for dynamic content  Finally i modified a code  and works perfectly   This example code will draw those lines before and after  and it is flexible in content change  Center aligned too    HTML           lt div style  text-align center  gt                lt h1 gt                   lt span  gt S lt  span gt               lt  h1 gt            lt  div gt             lt div style  text-align center  gt                lt h1 gt                   lt span  gt Long text lt  span gt               lt  h1 gt            lt  div gt     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                Result   https   jsfiddle net fasilkk vowqfnb9

User · Answer

CSS grids to the rescue Similar to the flex answers above  this can also be done using CSS Grids  This gives you more scope to offset the title  and a more simple way of expanding the gap between the lines  using grid-template-columns  and the content  using grid-gap   The benefits of this method over flex methods is the ease of being able to offset the lines  and additionally only needing to add in a gap between columns once  not twice  for each the  before and  after pseudo element   It is also much more syntactically cleaner and obvious IMO   x000D   x000D  h1     display  grid    grid-template-columns  1fr auto 1fr    align-items  center    grid-gap  1rem     h1 before  h1 after     content        display  block    border-top  2px solid currentColor     h1 offset     grid-template-columns  1fr auto 3fr     h1 biggap     grid-gap  4rem    x000D   lt h1 gt This is a title lt  h1 gt    lt h1 class  offset  gt Offset title lt  h1 gt    lt h1 class  biggap  gt Gappy title lt  h1 gt    lt h1 gt     lt span gt Multi-line lt br   gt title lt  span gt   lt  h1 gt  x000D   x000D   x000D

User · Answer

Not to beat a dead horse  but I was searching for a solution  ended up here  and was myself not satisfied with the options  not least for some reason I wasn t able to get the provided solutions here to work well for me   Likely due to errors on my part     But I ve been playing with flexbox and here s something I did get to work for myself   Some of the settings are hard-wired  but only for purposes of demonstration  I d think this solution ought to work in just about any modern browser  Just remove adjust the fixed settings for the  flex-parent class  adjust colors text stuff and  I hope  you ll be as happy as I am with this approach   HTML    x000D   x000D   flex-parent   x000D    display  flex  x000D    width  300px  x000D    height  20px  x000D    align-items  center  x000D    x000D   x000D   flex-child-edge   x000D    flex-grow  2  x000D    height  1px  x000D    background-color   000  x000D    border  1px  000 solid  x000D    x000D   flex-child-text   x000D    flex-basis  auto  x000D    flex-grow  0  x000D    margin  0px 5px 0px 5px  x000D    text-align  center  x000D    x000D   lt div class  flex-parent  gt  x000D     lt div class  flex-child-edge  gt  lt  div gt  x000D     lt div class  flex-child-text  gt I found this simpler  lt  div gt  x000D     lt div class  flex-child-edge  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    I also saved my solution here  https   jsfiddle net Wellspring wupj1y1a 1

User · Answer

I use a table layout to fill the sides dynamically and 0-height  absolute-position divs for dynamic vertical positioning      no hard-coded dimensions no images no pseudo-elements respects background control bar appearance   https   jsfiddle net eq5gz5xL 18   I found that a little below true center looks best with text  this can be adjusted where the 55  is  taller height makes the bar lower   The appearance of the line can be changed where the border-bottom is   HTML    lt div class  title  gt     lt div class  title-row  gt       lt div class  bar-container  gt         lt div class  bar  gt  lt  div gt       lt  div gt       lt div class  text  gt        Title      lt  div gt       lt div class  bar-container  gt         lt div class  bar  gt  lt  div gt       lt  div gt     lt  div gt   lt  div gt    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

User · Answer

Here is Flex based solution    x000D   x000D  h1     display  flex    flex-direction  row    h1 before  h1 after    content        flex  1 1    border-bottom  1px solid    margin  auto    h1 before     margin-right  10px   h1 after     margin-left  10px   x000D   lt h1 gt Today lt  h1 gt  x000D   x000D   x000D   JSFiddle  https   jsfiddle net j0y7uaqL

User · Answer

This is roughly how I d do it  the line is created by setting a border-bottom on the containing h2 then giving the h2 a smaller line-height  The text is then put in a nested span with a non-transparent background    x000D   x000D  h2   x000D     width  100    x000D     text-align  center   x000D     border-bottom  1px solid  000   x000D     line-height  0 1em  x000D     margin  10px 0 20px   x000D     x000D   x000D  h2 span    x000D      background  fff   x000D      padding 0 10px   x000D    x000D   lt h2 gt  lt span gt THIS IS A TEST lt  span gt  lt  h2 gt  x000D   lt p gt this is some content other lt  p gt  x000D   x000D   x000D    I tested in Chrome only  but there s no reason it shouldn t work in other browsers   JSFiddle  http   jsfiddle net 7jGHS

[html] CSS technique for a horizontal line with words in the middle

Examples related to html

Examples related to css

Examples related to cross-browser