元素左侧和元素右侧的CSS样式填充空间

Question

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 -----------------

 #left { background-color: red; } #middle { width: 200px; /* it might be different */ } #right { background-color: red; } 

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

Answer 1

Can be achieved using display: flex

 .wrapper { display: flex; text-align: center; } #left { flex: 1; background-color: red; } #middle { /* it might be different */ } #right { flex: 1; background-color: red; } 

 <div class="wrapper"> <div id="left"></div> <div id="middle">Some text</div> <div id="right"></div> </div> <br/> <div class="wrapper"> <div id="left"></div> <div id="middle">Some long text can go here!</div> <div id="right"></div> </div> 

Answer 2

    .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>

Answer 3

Split into equal spaces using bootstrap and then fill color

<div class="container">
<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="row">
        <div class="col-md-4 col-sm-4 col-xs-4 fill-color"> h</div>
        <div class="col-md-4 col-sm-4 col-xs-4">h</div>
        <div class="col-md-4 col-sm-4 col-xs-4 fill-color">h</div>
    </div>
</div>

.fill-color {
   background: red;
}

Working fiddle

Answer 4

Surround your div by another div "container" , now you don't need left and right divs.. Your Text here, Div is surrounded by container div #container { background-color: red; }

    #middle {
        font-size: 30px;
        width: 80%;
        margin: auto;
        text-align: center;
        background-color: white;
    }


</style>

Answer 5

您可以在页面的左右div上添加margin属性。固定左右div的宽度。尝试一下，我想它将解决您的问题