1

   .header-center {
     display: flex; align-items: center;
     margin-top: 1%;
    }
    .header-center span {
     background-color: yellow;
     color: #86281e;
     font-weight: 600;
     padding: 0% 5%;
     text-align: center;
    }
    .header-center-line {
     background-color: #86281e;
     flex-grow: 1;
     height: 3px;
    }
<div class="header-center">
  <div class="header-center-line"></div>
  <span>some text</span>
  <div class="header-center-line"></div>
 </div>

I use the above code to display some text in the middle of the page, with horizontal lines left and right. This code seems to work fine except the fact that it breaks the two words in different lines instead of one. How can I fix this?

enter image description here

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
darkchampionz
  • 1,174
  • 5
  • 24
  • 47
  • Please could you update your question to include which OS, browser, and browser version you are experiencing the issue in? The code snippet in your question is displaying correctly for me in all browsers I have tested it in (Chrome, Firefox, IE Edge). – Sam Nov 06 '19 at 09:43
  • The duplicate does not show a dynamically growing/shrinking colored box around the text, like the OP's code tried to do. I cannot put an answer that solves the entire question here because it is closed, so instead I have put a full, working answer here: https://www.xitalogy.com/no-nav-pages/stackoverflow/center-text-horizontal-line-dynamic-size/answer/ I hope this is valuable to the OP and others. – Xitalogy Nov 16 '19 at 20:57

2 Answers2

-2

add display: inline-block; to .header-center-line

.header-center {
    display: flex; align-items: center;
    margin-top: 1%;
}
.header-center span {
    background-color: yellow;
    color: #86281e;
    font-weight: 600;
    padding: 0% 5%;
    text-align: center;
}
.header-center-line {
    background-color: #86281e;
    flex-grow: 1;
    height: 3px;
    display: inline-block;
}
<div class="header-center">
    <div class="header-center-line"></div>
    <span>some text</span>
    <div class="header-center-line"></div>
</div>
Libra
  • 2,544
  • 1
  • 8
  • 24
-3

Try adding width: max-content;

Like this

.header-center span {
    background-color: yellow;
    color: #86281e;
    font-weight: 600;
    padding: 0% 5%;
    text-align: center;
    width: max-content;
}
magicfishy
  • 90
  • 8