css - 盒子的(复杂的)水平居中

Question

我需要水平(我不关心垂直)居中三个框(div 或 span，我不关心)这样中间的那个总是居中并且它的宽度是文本所需的最小宽度(单个词)它包含，以下列方式:

用简短的文字(一个词):

--------------------------------------------------------------
|                                                            |
| ----------------------  ----------  ---------------------- |
| |                    |  |xxxxxxxx|  |                    | |
| |                    |  |        |  |                    | |
| ----------------------  ----------  ---------------------- |
|                                                            |
--------------------------------------------------------------

长文本(还是一个词):

--------------------------------------------------------------
|                                                            |
| -----------  ------------------------------  ------------- |
| |         |  |xxxxxxxxxxxxxxxxxxxxxxxxxxxx|  |           | |
| |         |  |                            |  |           | |
| -----------  ------------------------------  ------------- |
|                                                            |
--------------------------------------------------------------

这可能吗？

我的最后一次尝试远未成功(因为方框重叠，我不希望这样):

<div style="position:relative;";>
<span style="display:block;width:100px;margin:0 auto;text-align:center;border:1px solid red"><h1>mid_text</h1>
<span style="text-align:right;position:absolute;top:0em;left:0;display:block;width:50%;float:left;border:1px solid red">left text</span>
<span style="text-align:left;position:absolute;top:0em;left:50%;display:block;float:right;width:50%;border:1px solid red">right text</span>
</span>
</div>

Answer 1

CSS

将此添加到您的 CSS 文件中:

body
{
    padding:20px;
}
.wrapper
{
    display:table;
    width:100%;
}
.wrapper .left,
.wrapper .center,
.wrapper .right
{
    padding:0 20px;
    display:table-cell;
}
.wrapper .left,
.wrapper .right
{
    width:50%;
    background-color:#2b88f1;
}
.wrapper .center
{
    text-align:center;
    background-color:#fff;
}

HTML

这就是您的 HTML 代码应该是这样的:

<div class="wrapper">
   <div class="left">
       left
    </div>
    <div class="center"> 
        center
    </div>
    <div class="right">
        right
    </div>
</div>

<hr>

<div class="wrapper">
   <div class="left">
       left
    </div>
    <div class="center"> 
        ceeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeenter
    </div>
    <div class="right">
        right
    </div>
</div>

示例:http://jsfiddle.net/YVhLt/