1

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

在这里你可以看到一个截图：

在此处输入图像描述

如何垂直对齐文本？

这是我的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>
4

3 回答 3

0

Try to edit your CSS file, by adding vertical-align:middle; to your #breadcrumb ID, like this:

#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;
}
于 2013-01-03T23:57:18.760 回答
0

由于代码不完整，有点难以判断，但我猜你要么缺少一些标记，要么有其他样式弄乱了你的面包屑。

以下内容可以很好地在水平行中显示项目（您的样式，我的 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 开发者工具来检测是否应用了其他样式。

于 2013-01-03T23:13:15.653 回答
0

尝试：

li{display: inline}

你也可以使用

li{display:inline-block}

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

这是示例：

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

于 2013-01-03T23:14:01.947 回答