Question

我有一个白色背景的Div栏，我的面包屑就在其中。

在这里你可以看到截图：

enter image description here

如何垂直对齐文本？

这是我的 CSS ：

/*  Breadcrumb  */
#breadcrumb {
    position: relative;
    background: white;
    padding: 4px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    behavior: url(/scripts/PIE.htc);
    font-size: .9em;
    color: #526472;
}
#breadcrumb ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#breadcrumb li {
    float: left;
    padding-left: 5px;
}
#breadcrumb a {
    padding-right: 10px;
    background: url(../images/div_breadcrumb.gif) no-repeat right center;
    color: #526472;
    margin-right: 5px;
}

我的 HTML ：

<div id="breadcrumb" class="clearfix">
    <ul>
        <li style="white-space: nowrap;"> 
            <a style="white-space: nowrap;" href="">Home</a> 
        </li>
        <li style="white-space: nowrap;"> 
            Visual collaboration solutions 
        </li>
    </ul>
    <div id="shareThis" class="fl_right"> Share: </div>
</div>

Answer 1

由于代码不完整，有点难以辨别，但我猜你错过了一些标记，或者还有其他样式弄乱了你的面包屑。

以下工作可以很好地显示水平行中的项目（您的样式，我的HTML）。

<html>
<head>
    <style>
        #breadcrumb         { position: relative; background: white; padding: 4px; border-radius:2px; -moz-border-radius: 2px;  -webkit-border-radius: 2px; behavior: url(/scripts/PIE.htc); font-size: .9em; color: #526472;}
        #breadcrumb ul      { margin: 0; padding: 0; list-style: none;  }
        #breadcrumb li      { float: left; padding-left: 25px;}
        #breadcrumb a       { padding-right: 10px; background: url(../images/div_breadcrumb.gif) no-repeat right center; color: #526472; margin-right: 5px;}
    </style>

</head>
<body>
<div id="breadcrumb" class="clearfix">
         <ul>
             <li>Home Visual collaboration solutions</li>
             <li>La</li>
             <li>Ti</li>
             <li>Da</li>
         </ul>
    </div>
</body>
</html>

如果您正确使用ul和li标签，可以尝试使用Firebug或Chrome开发人员工具来检测是否正在应用其他样式。

Answer 2

尝试：

li{display: inline}

您也可以使用

li{display:inline-block}

这样你的li元素就不会丢失它们的块属性

以下是示例：

http://jsfiddle.net/bFe35/1/

Answer 3

尝试修改 CSS 文件，方法是将vertical-align:middle;添加到#breadcrumb ID，如下所示：

#breadcrumb {
    position: relative;
    background: white;
    padding: 4px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    behavior: url(/scripts/PIE.htc);
    font-size: .9em;
    color: #526472;
    vertical-align:middle;
}

CSS垂直对齐div中的列表项

3 个答案: