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>

我尝试了以下内容：

添加一个外部div并对齐该中心，这对内部div没有任何作用
我尝试使用三个div代替浮动所有左边，但仍然无法将文本对齐在“管道”/行

我已经尝试了很多，但是在我花了5个小时之后，我已经记不起我做了什么以及我不再做什么了。

这应该是IE 7,8,9以及所有其他最新的浏览器。

如果有人能帮助我，我将非常感激。

由于 ANINA

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/

这是一个简单的实现

Answer 2

你为什么用li来拿着烟斗？

我认为这可能更合适

<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: "|";
    }

我假设你了解如何在li上使用它，如果那是你真正需要的。

使用浮动li浮动div，如何将文本置于LI中心

2 个答案: