CSS居中文本

黃色欄是width:100%頭CSS居中文本

我想實現正文能始終CENTERED不管側文本的長度。

文本之間的利潤率是100像素

圖片：

enter image description here

在此先感謝

編輯：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; 

    }

來源

2012-04-16 John

請發佈您的HTML和CSS – Curt 2012-04-16 11:23:53

@Curt新增。儘管如此，它並沒有什麼特別 – John 2012-04-16 11:35:25

如果我理解可能就是你想要的。

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-16 11:36:16 sandeep

是的，但我可以在這裏看到，居中的文本移動，這取決於側文本的長度。 – John 2012-04-16 11:51:51

檢查我的更新小提琴可能這就是你想要 – sandeep 2012-04-16 12:04:45

嗨，你可以用浮動作爲這樣

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/

來源

2012-04-16 11:36:32

回答

相關問題