Question

想象一个元素，它的容器居中，有宽度，但不知道确切的宽度，像文本一样，我希望左边的空间和右边的空间是相同的和有色的，如下所示： / p>

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

#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

可以使用display: flex

来实现

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

用另一个div“容器”包围你的div，现在你不需要左右div .. 你的文字在这里，Div被容器div包围＃容器 { 背景颜色：红色; }

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


</style>

Answer 5

你可以将margin属性添加到你的左右div。修复左右div的宽度。试试这个，我想它会解决你的问题

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

5 个答案: