CSS垂直對齊div中的列表項目

我有一個帶有白色背景的Div欄，其中包含我的麪包屑。CSS垂直對齊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>

來源

2013-01-03 StevieB

只是增加寬度#breadcrumb和UL的風格。 –

對不起錯字......我的意思是垂直對齊 – StevieB

所以只是刪除浮動：你的李風格的左邊 –

由於不完整的代碼，這是一個有點難以啓齒，但我猜你或者缺少一些標記，或者有其他樣式與你的麪包屑混淆。

以下工作可以很好地顯示水平行中的項目（您的樣式，我的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-03 23:13:15

嘿我添加了html到原始文章，但不能讓它顯示一些原因 – StevieB

我也希望它整個UL排列居中在div – StevieB

我幫助你更好地設置問題和代碼。 @StevieB – Fabio

嘗試：

li{display: inline}

你也可以使用

li{display:inline-block}

這樣，你的li元素不會失去他們的塊屬性

這裏的例子：

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

來源

2013-01-03 23:14:01 filistea

嘗試編輯您的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; 
}

來源

2013-01-03 23:57:18 Fabio

CSS垂直對齊div中的列表項目

回答

相關問題