2

3つのボックス（divまたはspan、私は気にしない）を水平方向に中央に配置する必要があります。これにより、中央のボックスが常に中央に配置され、その幅がテキスト（1つの単語）に必要な最小値になります。次のように含まれます。

短いテキスト（単一の単語）：

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

長いテキスト（ここでも1つの単語）：

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

1 に答える 1

7

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/

于 2012-08-11T11:35:06.857 に答える