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/

一个（复杂的）盒子的水平居中

1 个答案:

CSS

HTML