html - 带有 float li 的 float div，如何使 LI 中的文本居中

Question

我必须在 HTML/CSS 中实现以下看似简单的设计示例，但我似乎无法让带有两个管道的文本在页面上居中对齐。 Left Line, Text and Right Line in a centered position with text almost in the middle of the lines

这是我目前拥有的 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>

我尝试了以下方法:

1. 添加一个外部 div 并对齐该中心，这对内部 div 没有任何作用
2. 我试过使用三个 div 并全部向左浮动，但仍然无法对齐“管道”/线条中间的文本

我已经尝试了很多，但是在我已经花了 5 个小时之后，我已经不记得我做了什么和没有做什么了。

这应该适用于 IE 7、8、9 和所有其他最新的浏览器。

如果有人能帮我解决这个问题，我将不胜感激。

谢谢 阿妮娜

Answer 1

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/

这是一个简单的实现