中心显示区域

-2

亮（my site）我想将菜单栏放在页面中央。这里我的菜单的代码：中心显示区域

#navigation { 
    padding-bottom: auto; 
    width: 960px; 
    margin: auto; 
    text-align: center; 
    text-transform: uppercase; 
    overflow: hidden; 
    font-family: 'Raleway', sans-serif; 
    font-size: 13px; 
    background-color: #DDDDDD; 
    border: 0px solid; 
    border-radius: 15px; 
    color: #000000; 
    display: inline-block; 
}

在此先感谢帮助我！ :)

来源

2014-11-14 Sjors Luyckx

行内块元素可以居中于在父级上设置的tex-align。 :) '.bg-wrapper { text-align：center; }' – 2014-11-14 16:31:07

'padding-bottom：auto;'？ – Morpheus 2014-11-14 16:31:54

你需要发布所有相关的代码（不是一个活的网站，因为这会改变用户的使用习惯，他们也不会从你的问题中受益），还可能是JSFiddle。此代码不是导航的所有样式，并且您不添加导航代码 – 2014-11-14 16:37:33

将width: 100%;添加到您的#navigation为一个完整的中心菜单。

或更改一个居中的菜单displayblock到在没有全宽度的背景。

如果你想保持黄线下，添加1px的底部边距。这会将剩下的一个像素移位，并显示一条黄线。

margin-bottom: 1px

工作的jsfiddle此：http://jsfiddle.net/qwnwkp7u/2/

来源

2014-11-14 16:30:37

是的，它为我工作，但菜单栏变得比需要的大得多，我不会喜欢.. – 2014-11-14 16:35:52

我已经用两种方法编辑了我的答案，一种是全宽背景，一种没有，然后会给你一个小的菜单，只是需要的宽度:) – 2014-11-14 16:37:13

但我想保持菜单栏下的小黄线（我想增加哪一个），当我使用display：block; ，我失去了那条小路。 – 2014-11-14 16:38:31

开关显示：inline-block;显示：block;

来源

2014-11-14 16:30:23 dmikester1

但我想保留在菜单栏（我想增加哪一个）下的小黄线，当我使用display：block; ，我失去了那条小路。 – 2014-11-14 16:35:12

我猜你需要了解一些关于块和inline-block的元素。

块元素，如果大小小于页面/容器可以基本;以margin：auto;为中心。

行内块元素的行为与文本类似，可以跟随文本对齐值。

要居中你的菜单，你有那么2个选择： margin:auto;与块格式化，你需要那么就删除你的inline-block的显示至极的作用：

#navigation { 
padding-bottom: auto; 
width: 960px; 
margin: auto; 
text-align: center; 
text-transform: uppercase; 
overflow: hidden; 
font-family: 'Raleway', sans-serif; 
font-size: 13px; 
background-color: #DDDDDD; 
border: 0px solid; 
border-radius: 15px; 
color: #000000; 
}

从其父如果

或 text-align:center;作为内联boxe。至极会在这里：

.bg-wrapper { 
text-align:center; 
}

如果inline-block的在这里用来触发一些特殊的布局，喜欢抱着floatting元素，你可以在这里把display:block成display:table;。

doei

来源

2014-11-14 16:52:42

中心显示区域

回答

相关问题