Question

如何使用动态大小（文本）的居中div，并且可以看到其旁边的div而不指示其大小？

div“text”没有大小，只有up和focus。侧面div（bg-bg-left和right）应该是可见的并且宽度为auto。

HTML：

<div class="cont">
    <div class="bg-left">The width should be automatic.</div>
    <div class="text">This text should be centered and may increase the width.</div>
    <div class="bg-right">The width should be automatic.</div>    
</div>

的CSS：

.cont{ width:500px; height:15px; background:purple;}
.bg-left { float:left; width:50px; height:15px; background:red; }
.text { float:left; height:15px; max-width:200px; background:green; white-space:nowrap; }
.bg-right { float:left; width:50px; height:15px; background:red; }

http://jsfiddle.net/PnY2Q/4/

Answer 1

检查以下代码，使div和内容居中

<html>
<head>

<style>
* { margin: 0; padding: 0; }
#page{display:table;overflow:hidden;margin:0px auto;}
*:first-child+html #page {position:relative;}/*ie7*/
* html #page{position:relative;}/*ie6*/

#content_container{display:table-cell;vertical-align: middle;}
*:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
* html #content_container{position:absolute;top:50%;}/*ie6*/

*:first-child+html #content{position:relative;top:-50%;}/*ie7*/
* html #content{position:relative;top:-50%;}/*ie6*/

html,body{height:100%;}
#page{height:100%;width:465px;}
</style>
</head>
<body>
<div id="page">
       <div id="content_container">
               <div id="content">
                     <p>your content</p>
               </div>
       </div>
</div>
</body>
</html>

<强> DEMO

Answer 2

您可以使用表格显示轻松完成浮动，而不是浮动：

.cont{display:table; width:500px; height:15px; background:purple;}
.bg-left { display:table-cell; width:50px; height:15px; background:red; }
.text { display:table-cell; height:15px; max-width:200px; background:green; white-space:nowrap; }
.bg-right { display:table-cell; width:50px; height:15px; background:red; }

如何使用动态大小（文本）的中心div，并且其侧面div可见而不指示其大小？

2 个答案: