nikagar4 nikagar4 - 4 months ago 6
jQuery Question

CSS Styling fill space left in the left of the element and the right of the element

imagine an element, which is centered in its container, has its width, but don't know the exact width, something like text and i want the left space and right space to be same and colored, something like this:

----------------- Test This -----------------

<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>

#left{
background-color: red;
}

#middle{
width: 200px; /* it might be different */
}

#right{
background-color: red;
}

Answer
    .container{
       display:flex;
    }
     .main-body{
       flex:1 1 auto;
    }
    #left{
        background-color: red;
   }
   #middle{
        width: 200px;
       text-align:center;
  }
    #right{
        background-color: red;
    }
  <div class="container">
    <div class="main-body" id="left"></div>
    <div id="middle">Hello</div>
    <div  class="main-body" id="right"></div>
  </div>
Comments