浮動div與浮動李，我如何居中文本在LI

我必須實現以下，儘管看起來很簡單，設計示例在HTML/CSS，但我似乎無法得到與兩個文本管道中心在頁面上對齊。 Left Line, Text and Right Line in a centered position with text almost in the middle of the lines 浮動div與浮動李，我如何居中文本在LI

這裏是我目前擁有的CSS代碼：

#nav { 
float: right; 
font-family: "Trebuchet MS","Lucida Grande","Lucida Sans",Verdana,Arial,sans-serif; 
font-size: 6.5em; 
margin: 0px 0 10px; 
/****************IE6****************/ 
padding-top: 0em; 
} 
#nav ul { 
    padding: 0 0 0 20px; 
    position: relative; 
} 
ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input { 
    margin: 0; 
    padding: 0; 
} 
ul, ol { 
    list-style: none outside none; 
} 
#nav ul li { 
    float: left; 
    margin: 0 0 0 20px; 
    position: relative; 
    padding-right: 20px; 
    background:url(pipe.png) no-repeat 100% 50%; 
} 
#nav ul li:last-child 
{ 
    background: none; 
} 
#nav li { 
    color: #666666; 
    text-decoration: none; 
    padding-right: 5px; 
} 


/*End hide*/ 
/*Mac IE 5*/ 
* html #nav li:first-child { border-left: 0; }

這是我的HTML

<div id="nav"> 
    <ul> 
     <li> 
      &nbsp; 
     </li> 
     <li> 
      LYNXX 
     </li> 
     <li> 
     &nbsp; 
     </li> 
    </ul> 
</div>

我曾嘗試以下：

添加外層的div並對齊該中心，這對內部分區沒有任何作用
我試過使用三個div來代替並且全部左移，但仍然不能對齊「管道」/行中間的文本

我嘗試了更多，但5小時後我已經花了它，我不記得我做了什麼，我不做什麼。

這應該是IE 7,8,9和所有其他最新的瀏覽器準備就緒。

如果有人能幫助我，我會非常感激。

感謝 ANINA

來源

2012-05-03 Anina

爲什麼使用浮動？創建一個div容器，在裏面放入另外三個div，並且使用position：absolute;和左上角。 –

你的意思是這樣的嗎？ http://jsfiddle.net/Dqz3R/ – vivek

HTML：

<ul> 
<li><span>Text goes here</span></li> 
</ul>

CSS：

ul { 
list-style-type: none; 
} 
ul li { 
background: #000; 
text-align: center; 
float: left; 
padding: 30px 100px; 
} 
ul li span { 
display: block; 
float: left; 
margin: 0 auto; 
padding: 10px 50px; 
border-width: 0 1px; 
border-style: solid; 
border-color: #fff; 
text-align: center; 
color: #fff; 
}

http://jsfiddle.net/MKf4B/

這是一個簡單的實現

來源

2012-05-03 16:44:14 KBN

嗨XFortyFourx，感謝您的迴應，這個解決方案完美工作，直到我添加更多字符的文字。然後它將文本包裹到下一行，我不想要。我將在動態場景中使用此解決方案，其中文本可以是x個字符（它將永遠不會換行到下一行），但管道和文本之間的間距始終保持相同的距離。所以如果角色總是一樣的話，那麼解決方案就會運行良好，但是什麼時候發生過，什麼時候會發生，我怎麼才能讓它與動態場景一起工作呢？ – Anina

你爲什麼用李氏來夾住管道？

我覺得這可能更適合

<div class="container"> 
    <div class="text"> 
     Text goes here 
    </div> 
</div>

有了這些風格

.container { 
     width: 500px; 
     margin: auto; 
    } 

    .text { 
     width: 250px; 
     margin: auto; 
    } 

    .text:before { 
     content: "|"; 
    } 

    .text:after { 
     content: "|"; 
    }

我假設你瞭解如何使用這個李的，如果這是你真正需要的。

來源

2012-05-03 16:58:54 ohiock

這並沒有訣竅，因爲IE7看不到內容：「|」一部分的CSS。我之前也試過這個解決方案，但由於某些原因，文本總是出現在黑色背景的上半部分。任何想法爲什麼會發生？ – Anina

道歉，我不知道IE7不支持僞類。我不確定你的問題在這裏是什麼意思，也許你只需要調整內部容器上的邊距和/或填充以將其準確定位在你想要的位置上？ – ohiock

浮動div與浮動李，我如何居中文本在LI

回答

相關問題