CSS 样式填充 space left 元素左侧和元素右侧

Question

想象一个元素，它在它的容器中居中，有它的宽度，但不知道确切的宽度，比如文本，我想要左边 space 和右边 space颜色相同，像这样：

----------------测试这个----------------

#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

你可以在yours.Fix左右宽度div.Try的左右div加上边距属性div.Try这样，我想它会解决你的问题

Answer 2

可以使用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 3

使用bootstrap分割成相等的空间，然后填充颜色

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

工作fiddle

Answer 4

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

用另一个 div "container" 包围你的 div，现在你不需要左右 divs.. 您在此处的文字 Div 被容器 div 包围＃容器 { 背景色：红色； }

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


</style>

CSS 样式填充 space left 元素左侧和元素右侧

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

html

javascript

css

jquery

width