2012-04-16 2 views
0

Желтый бар width:100% заголовкаCSS в центре текст

Я хотел бы достичь основного текста быть всегда ЦЕНТРОМ независимо от длины бокового текста.

Маржа между текстом являются 100px

Изображение:

enter image description here

Заранее спасибо

EDIT: 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; 

    } 
+2

отправьте свой HTML и CSS – Curt

+0

@ Курт Добавлено. Однако это ничего особенного. – John

ответ

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/

+0

Да, но, как я вижу, центрированный текст перемещается в зависимости от длины боковых текстов. – John

+0

Проверьте, что моя обновленная скрипка - это вы хотите – sandeep

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/

Смежные вопросы