css - 中心水平菜單項

任何幫助將不勝感激。我已經創建了代碼的jsfiddle - http://jsfiddle.net/dfo44q7f/css - 中心水平菜單項

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Untitled</title> 
</head> 
<body> 
<ul class="nav"> 
    <li><a href="/">Menu1</a></li> 
    <li><a href="/Menu2/">Menu2</a></li> 
    <li><a href="/Menu3/">Menu3</a></li> 
</ul> 
</body> 
</html>

我如何？

居中文中的李？

來源

2015-11-12 Lacer

文本居中在列表元素中。它看起來並不像它，因爲你在左邊放了很多填充。 – timgvandijk

改變填充於：

.nav a

爲：

padding: 10px 0 10px 0;

或：

padding: 10px 40px 10px 40px;

第二個值是爲右填充和第四爲左填充如果你想讓它居中，你將不得不將它們設置爲相同的值。

來源

2015-11-12 19:35:44

感謝所有人的回答。我更新了代碼.. http://jsfiddle.net/dfo44q7f/3/我的問題是如何在菜單項的左側和右側添加填充而不更改文本下方底部邊框的寬度？ – Lacer

@Lacer你將不得不添加填充左右，在這裏我修改了填充http://jsfiddle.net/dfo44q7f/4/ –

css - 中心水平菜單項

回答

相關問題