0

黄色のバーはwidth:100%ヘッダーです

サイドテキストの長さに関係なく、MAIN TEXTが常にCENTEREDになるようにしたいと考えています。

テキスト間の余白は 100px です

画像：

ここに画像の説明を入力

前もって感謝します

編集：これまでのHTMLとCSS：

HTML:

    <html>
    <head>
    </head>
    <body>
    <center>
    <div id="top"></div>
    Text Logo
    <span id="mainText"> Menu Links </span>
    Username: <?php echo $uname; ?>
    </center>
    </body>
    </html>

CSS: 

    #mainText {

    margin-right:100px;
    margin-left:100px;

    }
4

2 に答える 2

2

私が理解すれば、それはあなたが望んでいることかもしれません。

CSS

.left{
    float:left;
    background:yellow;
}
.right{
    float:right;
    background:green;
}
.middle{
    display:inline-block;
    *display:inline/*For IE7*/
    *zoom:1;
    vertical-align:top;
    background:red;
    margin:0 100px;
}
.parent{
    text-align:center;
}
.parent div{
    text-align:left;
}

HTML

<div class="parent">
 <p class="left">L side Text</p>
 <p class="middle">Center side Text</p>
 <p class="right">R side Text</p>
</div>

これをチェックしてくださいhttp://jsfiddle.net/XhMtK/3/

更新しました

それはあなたが望むかもしれません

これをチェックしてくださいhttp://jsfiddle.net/XhMtK/4/

于 2012-04-16T11:36:16.030 に答える
0

こんにちは、このようにフロートを使用できます

CSS

.one{
width:90%;
    margin:0 auto;
    overflow:hidden;
    background:green;
    text-align:center;
}

.left{
    float:left;
    background:yellow;
    width:20%;

}

.center{
    margin:0 auto;
    background:pink;
    width:50%;




}

.right{
    float:right;
    background:red;
    width:20%;

}

HTML

<div class="one">
    <div class="left">Left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>

ライブデモhttp://jsfiddle.net/rohitazad/JNxsZ/2/ </p>

于 2012-04-16T11:36:32.907 に答える