Add centered text to the middle of a hr -like line

Question

I m wondering what options one has in xhtml 1 0 strict to create a line on both sides of text like-so    Section one ----------------------- Next section ----------------------- Section two   I ve thought of doing some fancy things like this    lt div style  float left  width  44    gt  lt hr  gt  lt  div gt   lt div style  float right  width  44    gt  lt hr  gt  lt  div gt  Next section   Or alternatively  because the above has problems with alignment  both vertical and horizontal     lt table gt  lt tr gt   lt td style  width 47   gt  lt hr  gt  lt  td gt   lt td style  vertical-align middle  text-align  center  gt Next section lt  td gt   lt td style  width 47   gt  lt hr  gt  lt  td gt   lt  tr gt  lt  table gt    This also has alignment problems  which I solve with this mess    lt table gt  lt tr gt   lt td style  border-bottom  1px solid gray  width  47   gt  amp nbsp  lt  td gt   lt td style  vertical-align middle text-align center  rowspan  2  gt Next section lt  td gt   lt td style  border-bottom  1px solid gray  width  47   gt  amp nbsp  lt  td gt   lt  tr gt  lt tr gt   lt td gt  amp nbsp  lt  td gt   lt td gt  amp nbsp  lt  td gt   lt  tr gt  lt  table gt    In addition to the alignment problems  both options feel  fudgy   and I d be much obliged if you happened to have seen this before and know of an elegant solution

User · Answer

There s always the good old FIELDSET   fieldset    border-left  none  border-right  none  border-bottom  none      fieldset legend    text-align  center  padding-left  10px  padding-right  10px

User · Answer

Try this    x000D   x000D   divider   x000D   width 500px  x000D   text-align center  x000D    x000D   x000D   divider hr   x000D   margin-left auto  x000D   margin-right auto  x000D   width 40   x000D   x000D    x000D   x000D   left   x000D   float left  x000D    x000D   x000D   right   x000D   float right  x000D    x000D   lt div class  divider  gt  x000D       lt hr class  left   gt TEXT lt hr class  right    gt  x000D   lt  div gt  x000D   x000D   x000D    Live preview on jsFiddle

User · Answer

lt div class  divider-line-x  gt  lt span gt Next section lt  span gt  lt  div gt           Divider          divider-line-x       position  relative      text-align  center       font-family  Arial       font-weight  bold      font-size  12px          color   333      border-bottom  1px dashed  ccc      divider-line-x span       position  relative       top  10px      padding  0 25px          background   fff

User · Answer

Bootstrap grid   HTML      lt div class  row vertical-center  gt       lt div class  col-xs-5  gt  lt hr gt  lt  div gt       lt div class  col-xs-2  style  color  white  gt  Text lt  div gt       lt div class  col-xs-5  gt  lt hr gt  lt  div gt     lt  div gt    CSS    vertical-center    display  flex    align-items  center

User · Answer

I just came across the same problem  here is one way to solve it    lt table width  100   gt     lt tr gt       lt td gt  lt hr   gt  lt  td gt       lt td style  width 1px  padding  0 10px  white-space  nowrap   gt Some text lt  td gt       lt td gt  lt hr   gt  lt  td gt     lt  tr gt   lt  table gt     It works without setting a background on the text element  i e  it will look good regardless what background is behind it    You can try it out here  http   jsfiddle net 88vgS

User · Answer

Responsive  transparent background  variable height and style of divider  variable position of text  adjustable distance between divider and text   Can also be applied multiple times with different selectors for multiple divider styles in same project  SCSS below   Markup  HTML     lt div class  divider  text-position  right  gt Divider lt  div gt    CSS     divider     display  flex    align-items  center    padding  0 1rem      divider before   divider after     content        flex  0 1 100     border-bottom  5px dotted  ccc    margin  0 1rem      divider before     margin-left  0      divider after     margin-right  0      divider text-position  right   after   divider text-position  left   before     content  none      Without text-position it defaults to center   Demo     x000D   x000D   divider   x000D    display  flex  x000D    align-items  center  x000D    padding  0 1rem  x000D    x000D   x000D   divider before  x000D   divider after   x000D    content      x000D    flex  0 1 100   x000D    border-bottom  5px dotted  ccc  x000D    margin  0 1rem  x000D    x000D   x000D   divider before   x000D    margin-left  0  x000D    x000D   x000D   divider after   x000D    margin-right  0  x000D    x000D   x000D   divider text-position  right   after  x000D   divider text-position  left   before   x000D    content  none  x000D    x000D   lt span class  divider  text-position  left  gt Divider lt  span gt  x000D   lt h2 class  divider  gt Divider lt  h2 gt  x000D   lt div class  divider  text-position  right  gt Divider lt  div gt  x000D   x000D   x000D    And SCSS  to modify it quickly      divider-selector        divider    divider-border-color  rgba 0 0 0  21    divider-padding       1rem   divider-border-width  1px   divider-border-style  solid   divider-max-width     100       divider-selector        display  flex      align-items  center      padding  0  divider-padding      max-width   divider-max-width      margin-left  auto      margin-right  auto        amp  before       amp  after           content              flex  0 1 100           border-bottom   divider-border-width  divider-border-style  divider-border-color          margin  0  divider-padding          transform  translateY    divider-border-width    2              amp  before           margin-left  0              amp  after           margin-right  0              amp  text-position  right   after       amp  text-position  left   before           content  none            fiddle here

User · Answer

The way to solve this without knowing the width and the background color is the following   Structure   lt div class  strike  gt      lt span gt Kringle lt  span gt   lt  div gt    CSS   strike       display  block      text-align  center      overflow  hidden      white-space  nowrap       strike  gt  span       position  relative      display  inline-block      strike  gt  span before   strike  gt  span after       content          position  absolute      top  50       width  9999px      height  1px      background  red      strike  gt  span before       right  100       margin-right  15px      strike  gt  span after       left  100       margin-left  15px      Example  http   jsfiddle net z8Hnz   Double line  To create a double line  use one of the following options   1  Fixed space between lines   strike  gt  span before   strike  gt  span after       content          position  absolute      top  50       width  9999px      border-top  4px double red    Example  http   jsfiddle net z8Hnz 103   2  Custom space between lines   strike  gt  span before   strike  gt  span after       content          position  absolute      top  50       width  9999px      height  5px     space between lines        margin-top  -2px     adjust vertical align        border-top  1px solid red      border-bottom  1px solid red      Example  http   jsfiddle net z8Hnz 105     SASS  SCSS  version   Based on this solution  I added SCSS  with color property  if it could help someone       mixins scss  mixin bg-strike  color         display  block      text-align  center      overflow  hidden      white-space  nowrap         gt  span            position  relative          display  inline-block            amp  before           amp  after               content                  position  absolute              top  50               width  9999px              height  1px              background   color                      amp  before               right  100               margin-right  15px                      amp  after               left  100               margin-left  15px                      example of use       content scss h2        include bg-strike  col1       color   col1

User · Answer

Looking at above  I modified to   CSS   divider       font  33px sans-serif      margin-top  30px      text-align center      text-transform  uppercase     divider span       position relative     divider span before   divider span after       border-top  2px solid  000      content         position  absolute      top  15px      right  10em      bottom  0      width  80      divider span after       position  absolute      top  15px      left 10em      right 0      bottom  0      HTML   lt div class  divider  gt       lt span gt This is your title lt  span gt  lt  div gt    Seems to work fine

User · Answer

This worked for me and does not require background color behind the text to hide a border line  instead uses actual hr tag   You can play around with the widths to get different sizes of hr lines    lt div gt       lt div style  display inline-block width 45   gt  lt hr width  80     gt  lt  div gt       lt div style  display inline-block width  9  text-align  center vertical-align 90  text-height  24px  gt  lt h4 gt OR lt  h4 gt  lt  div gt       lt div style  display inline-block width 45  float right   gt  lt hr width  80    gt  lt  div gt   lt  div gt

User · Answer

Taking  kajic s solution and putting the styling in CSS    lt table class  tablehr  gt     lt td gt  lt hr   gt  lt  td gt     lt td gt Text  lt  td gt     lt td gt  lt hr   gt  lt  td gt   lt  table gt    Then CSS  but it depends on CSS3 in using nth selector     tablehr   width 100      tablehr  gt  tbody  gt  tr  gt  td nth-child 2    width 1px  padding  0 10px  white-space  nowrap      Cheers    P S  On tbody and tr  Chrome  IE and Firefox at least automatically inserts a tbody and tr  which is why my sample  like  kajic s  didn t include these so as to keep things shorter in the needed html markup  This solution was tested with newest versions of IE  Chrome  and Firefox  as of 2013

User · Answer

please try this with bootstrap   lt div class  quot text-center d-flex quot  gt     lt hr className  quot flex-grow-1 quot    gt     lt span className  quot px-2 font-weight-lighter small align-self-center quot  gt      Hello    lt  span gt     lt hr className  quot flex-grow-1 quot    gt   lt  div gt   here is result

User · Answer

I made a fiddle that uses FlexBox and will also give you different styles of HR  double line  symbols in the center of the line  drop shadow  inset  dashed  etc    CSS  button       padding  8px      border-radius  4px      background-color   fff      border  1px solid  ccc      margin  2px         button hover       cursor  pointer         button active       background-color  rgb 34  179  247       color   fff          codeBlock       display  none          htmlCode   cssCode       background-color  rgba 34  179  247  0 5        width  100       padding  10px          divider       display  flex      flex-direction  row      flex-flow  row      width  100           divider fixed       width  400px          divider  gt  label       align-self  baseline      flex-grow  2      white-space  nowrap          divider  gt  hr       margin-top  10px      width  100       border  0      height  1px      background   666          divider left  gt  label       order  1      padding-right  5px          divider left  gt  hr       order  2         divider right  gt  label       padding-left  5px           hr bars with centered text         first HR in a centered version        divider center  gt  first-child       margin-right  5px           second HR in a centered version        divider center  gt  last-child       margin-left  5px            HR style variations        hr gradient       background  transparent      background-image  linear-gradient to right   f00   333   f00          hr gradient2       background  transparent      background-image  linear-gradient to right  rgba 0  0  0  0   rgba 255  0  0  0 5   rgba 0  0  0  0           hr dashed       background  transparent      border  0      border-top  1px dashed  666         hr dropshadow       background  transparent      height  12px      border  0      box-shadow  inset 0 12px 12px -12px rgba 0  0  0  0 5          hr blur       background  transparent      border  0      height  0         Firefox           box-shadow  0 0 10px 1px black         hr blur after       background  transparent         Not really supposed to work  but does        content    00a0          Prevent margin collapse           hr inset       background  transparent      border  0      height  0      border-top  1px solid rgba 0  0  0  0 1       border-bottom  1px solid rgba 255  255  255  0 3          hr flared       background  transparent      overflow  visible         For IE        height  30px      border-style  solid      border-color  black      border-width  1px 0 0 0      border-radius  20px         hr flared before       background  transparent      display  block      content          height  30px      margin-top  -31px      border-style  solid      border-color  black      border-width  0 0 1px 0      border-radius  20px         hr double       background  transparent      overflow  visible         For IE        padding  0      border  none      border-top  medium double  333      color   333      text-align  center         hr double after       background  transparent      content            display  inline-block      position  relative      top  -0 7em      font-size  1 5em      padding  0 0 25em        HTML   lt div class  divider left  gt     lt hr   gt     lt label gt Welcome  lt  label gt   lt  div gt   lt p gt  amp nbsp  lt  p gt   lt div class  divider right  gt     lt hr   gt     lt label gt Welcome  lt  label gt   lt  div gt   lt p gt  amp nbsp  lt  p gt   lt div class  divider center  gt     lt hr   gt     lt label gt Welcome  lt  label gt     lt hr   gt   lt  div gt   lt p gt  amp nbsp  lt  p gt   lt div class  divider left fixed  gt     lt hr   gt     lt label gt Welcome  lt  label gt   lt  div gt   lt p gt  amp nbsp  lt  p gt   lt div class  divider right fixed  gt     lt hr   gt     lt label gt Welcome  lt  label gt   lt  div gt   lt p gt  amp nbsp  lt  p gt   lt div class  divider center fixed  gt     lt hr   gt     lt label gt Welcome  lt  label gt     lt hr   gt   lt  div gt    Or here s an interactive Fiddle  http   jsfiddle net mpyszenj 439

User · Answer

lt div style  text-align  center  border-top  1px solid black  gt     lt div style  display  inline-block  position  relative  top  -10px  background-color  white  padding  0px 10px  gt text lt  div gt   lt  div gt

User · Answer

With Bootstrap 4 this seems to be working for me   x000D   x000D   lt div class  row  gt     lt div class  col  gt  lt hr  gt  lt  div gt     lt div class  col-auto  gt Or lt  div gt     lt div class  col  gt  lt hr  gt  lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

UPDATE  This will not work using HTML5  Instead  check out this question for more techniques  CSS challenge  can I do this without introducing more HTML     I used line-height 0 to create the effect in the header of my site guerilla-alumnus com   lt div class  description  gt      lt span gt Text lt  span gt   lt  div gt    description      border-top 1px dotted  AAAAAA      description span      background white none repeat scroll 0 0     line-height 0     padding 0 1em 1 5em     position relative        Another good method is on http   robots thoughtbot com   He uses a background image and floats to achieve a cool effect

User · Answer

Heres a simple solution with css only  no background tricks       center-separator       display  flex    line-height  1em    color  gray      center-separator  before   center-separator  after       content          display  inline-block      flex-grow  1      margin-top  0 5em      background  gray      height  1px      margin-right  10px      margin-left  10px        HTML      lt div class  center-separator  gt      centered text    lt  div gt    example fiddle  https   jsfiddle net 0Lkj6wd3

User · Answer

Flexbox and SCSS HTML  lt div class  quot divider quot  gt divider lt  div gt   SCSS  divider       display  flex      align-items  center      text-align  center      color   c2c2c2        amp   before       amp   after           content   quot  quot           flex  1          border-bottom  1px solid  c2c2c2             amp   before           margin-right  0 25em             amp   after           margin-left  0 25em

User · Answer

I use a h1 with a span in the middle   HTML Example    lt h1 gt  lt span gt Test archief lt  span gt  lt  h1 gt    CSS Example    archive h1  border-top 3px dotted  AAAAAA    archive h1 span   display block  background  fff  width 200px  margin -23px auto  text-align center     Simple as that

User · Answer

You can accomplish this with  before and  after without knowing the width of container or background color  and using them allows for greater styling of the line breaks  For example  this can be modified to make double-lines  dotted lines  etc  JSFiddle CSS  and HTML usage   x000D   x000D   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    x000D   lt div class  hr-sect  gt CATEGORY lt  div gt  x000D   x000D   x000D   SCSS Version   hr-sect       display  flex      flex-basis  100       align-items  center      color  rgba 0  0  0  0 35       margin  8px 0        amp  before   amp  after           content   quot  quot           flex-grow  1          background  rgba 0  0  0  0 35           height  1px          font-size  0          line-height  0          margin  0 8px

User · Answer

If you can use CSS and are willing to use the deprecated align attribute  a styled fieldset legend will work    lt style type  text css  gt  fieldset        border-width  1px 0 0 0     lt  style gt    lt fieldset gt   lt legend align  center  gt First Section lt  legend gt  Section 1 Stuff  lt  fieldset gt    lt fieldset gt   lt legend align  center  gt Second Section lt  legend gt  Section 2 Stuff  lt  fieldset gt    The intended purpose of a fieldset is to logically group form fields   As willoler pointed out  a text-align  center style for will not work for legend elements   align  center  is deprecated HTML but it should center the text properly in all browsers

User · Answer

x000D   x000D   orSpan  x000D    position  absolute  x000D    margin-top  -1 3rem  x000D    margin-left 50   x000D    padding 0 5px  x000D    background-color  white  x000D    x000D   lt div gt  x000D      lt hr gt   lt span class  orSpan  gt OR lt  span gt  x000D   lt  div gt  x000D   x000D   x000D       You may required to adjust the margin property

User · Answer

CSS   Divider   width  100   height  30px   text-align  center display  flex     Side  width  46 665  padding  30px 0     Middle  width  6 67  padding  20px 0      HTML   lt div class  Divider  gt       lt div class  Side  gt  lt hr gt  lt  div gt       lt div class  Middle  gt  lt span gt OR lt  span gt  lt  div gt       lt div class  Side  gt  lt hr gt  lt  div gt   lt  div gt    You may modify the width in class  side  and  middle  based on the length of your text in the tag  span   Be sure the width of the  middle  plus 2 times of the width of  side  equal to 100

User · Answer

You can use the CSS flex property HTML  lt div class  quot hrtext quot  gt     lt div class  quot hrbefore quot  gt       lt hr gt     lt  div gt     lt div class  quot hrcontent quot  gt       lt h2 gt TABLE OF CONTENT lt  h2 gt     lt  div gt     lt div class  quot hrafter quot  gt       lt hr gt     lt  div gt   lt  div gt   CSS  hrtext      display flex      align-items center     hrbefore  hrafter      flex auto     hrcontent      text-align center

User · Answer

lt fieldset style  border 0px  border-top 1px solid black  gt       lt legend gt Test lt  legend gt   lt  fieldset gt    Evil hack

User · Answer

You could try doing a fieldset  and aligning the  legend  element  your  next section  text  to the middle of the field with only border-top set  I m not sure about how a legend is positioned in accordance with the fieldset element  I imagine it might just be a simple margin  0px auto to do the trick  though   example     lt fieldset gt         lt legend gt Title lt  legend gt   lt  fieldset gt

User · Answer

html   lt div style  display  grid  grid-template-columns  1fr 1fr 1fr   class  add-heading  gt       lt hr class  add-hr  gt       lt h2 gt Add Employer lt  h2 gt       lt hr class  add-hr  gt   lt  div gt    css   add-hr        display  block  height  1px      border  0  border-top  4px solid  000      margin  1em 0  padding  0         add-heading h2    text-align  center

User · Answer

Woohoo my first post even though this is a year old  To avoid the background-coloring issues with wrappers  you could use inline-block with hr  nobody said that explicitly   Text-align should center correctly since they are inline elements    lt div style  text-align center  gt       lt hr style  display inline-block  position relative  top 4px  width 45     gt          amp nbsp New Section amp nbsp       lt hr style  display inline-block  position relative  top 4px  width 45     gt   lt  div gt

User · Answer

Flexbox is the solution   x000D   x000D   separator     display  flex    align-items  center    text-align  center      separator  before   separator  after     content        flex  1    border-bottom  1px solid  000      separator not  empty   before     margin-right   25em      separator not  empty   after     margin-left   25em    x000D   lt div class  separator  gt Next section lt  div gt  x000D   x000D   x000D   Nowadays every browser supports it  and you can ensure compatibility with decade-old browsers by adding respective vendor prefixes if needed  It would degrade gracefully anyways

User · Answer

DEMO PAGE  HTML   lt header gt     lt h1 contenteditable gt Write something lt  h1 gt   lt  header gt    CSS  header     display table    text-align center     header before  header after     content       display table-cell     background  000     width 50     -webkit-transform scaleY 0 3     transform scaleY 0 3     header  gt  h1  white-space pre  padding 0 15px

User · Answer

How about    x000D   x000D   lt div style  width  100   height  20px  border-bottom  1px solid black  text-align  center  gt  x000D     lt span style  font-size  40px  background-color   F3F5F6  padding  0 10px   gt  x000D      Section Title  lt  --Padding is optional-- gt  x000D     lt  span gt  x000D   lt  div gt  x000D   x000D   x000D    Check out this JSFiddle   You can use vw or   to make it responsive

User · Answer

Just Use      hr               padding  0          border  none          border-top  1px solid  CCC          color   333          text-align  center          font-size  12px          vertical-align middle            hr after               content   Or           display  inline-block          position  relative          top  -0 7em          font-size  1 2em          padding  0 0 25em          background  white

User · Answer

You could just use position relative and set a height on the parent   x000D   x000D   fake-legend   x000D    height  15px  x000D    width 100   x000D    border-bottom  solid 2px  000  x000D    text-align  center  x000D    margin  2em 0  x000D    x000D   fake-legend span   x000D    background   fff  x000D    position  relative  x000D    top  0  x000D    padding  0 20px  x000D    line-height 30px  x000D    x000D   lt p class  fake-legend  gt  lt span gt Or lt  span gt  x000D   lt  p gt  x000D   x000D   x000D

User · Answer

You can accomplish this without  lt hr   gt   Semantically  design should be done with the means of CSS  in this case it is quite possible   div header     position  relative    text-align  center    padding  0 10px    background   ffffff     div line     position  absolute    top  50     border-top  1px dashed    z-index  -1      lt div class  header  gt    Next section    lt div class  line  gt  amp nbsp  lt  div gt   lt  div gt

User · Answer

Bumping up a 2 year old post  but here is how I approach these situations using only one element and CSS    h1       text-align  center     h1 before  h1 after       content          background  url  http   heritageonfifth com images seperator png   left center repeat-x      width  15       height  30px      display  inline-block      margin  0 15px 0 0     h1 after      background-position  right center      margin  0 0 0 15px       And here is a fiddle to check it out  http   jsfiddle net sRhBc   random image from Google taken for the border    The only drawback of this approach is that it doesn t support IE7

[html] Add centered text to the middle of a <hr/>-like line

Examples related to html

Examples related to css

Examples related to xhtml

Examples related to line

Examples related to vertical-alignment