浮动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

回答

相关问题