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

【问题标题】：CSS Styling fill space left in the left of the element and the right of the elementCSS样式填充元素左侧和元素右侧的空间
【发布时间】：2016-07-06 21:40:17
【问题描述】：

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

----------------- 测试一下 -----------------

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

【问题讨论】：

其实有很多技术可以让任何元素居中...现在看看如何使用flex css

标签： javascript jquery html css width

【解决方案1】：

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

【讨论】：

【解决方案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>

【讨论】：

flexbox 是一个 CSS3 属性。在此处检查浏览器兼容性developer.mozilla.org/en-US/docs/Web/CSS/…

【解决方案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

【讨论】：

【解决方案4】：

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

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


</style>

【讨论】：

【解决方案5】：

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

【讨论】：