CSS樣式填充空間留在元素的左側和元素的右側

想象一個元素，它在它的容器中居中，有它的寬度，但不知道確切的寬度，像文本和我想要的東西左邊的空間和右邊的空間是相同的，顏色是這樣的：CSS樣式填充空間留在元素的左側和元素的右側

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

來源

2016-07-06 nikagar4

其實有很多技術，使任何元素中心......以現在看看如何使用柔性CSS –

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

來源

2016-07-06 12:33:14

這是最好的答案，由於謝謝 – nikagar4

-1

可以容限屬性添加到左， yours.Fix的右DIV左右div.Try本的寬度，我想它會解決你的問題

來源

2016-07-06 12:26:33

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

來源

2016-07-06 12:28:51 Pugazh

是它適用於所有的瀏覽器？ – mithu

flexbox是一個CSS3屬性。檢查瀏覽器兼容性在這裏https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes – Pugazh

這工作感謝 – nikagar4

拆分可以實現成相等使用空格引導，然後填充顏色

<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

來源

2016-07-06 12:30:27 scsiva1991

另一格「容器」環繞你的div，現在你不需要左右的div .. 您的文字在這裏，分區被div容器包圍＃容器{ background-color：red; }

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


</style>

來源

2016-07-06 12:33:28 bhupesh

CSS樣式填充空間留在元素的左側和元素的右側

回答

相關問題