纵向列表居中html,html – 导航菜单中的响应式垂直居中列表项

完成品

我的第一个解决方案可以在这篇文章的底部找到.

我们实际上使得这一点比必要更难…让我们做一个美味的汉堡包！

在< header&gt ;:中将nav和徽标包起来

logo

他们现在将是汉堡包之间的填充,看起来像这样：

header:before,header:after {

content:'';

display: block;

height: 50%;

background: #000;

width: 100%;

}

这给我们相当于：

:before bun

logo

:after bun

>标题：before和header：之后各自给出相同的百分比高度

>< header>容器控制伪元素的高度(：before,…之前)的子元素

>< nav>被包含在中间并且是完全垂直居中的.

HTML / CSS / Demo Snippet

html,body {

height: 100%;

}

body {

margin: 0;

}

header {

position: relative;

background: #000;

height: 4.3%;

min-width: 800px;

}

/*

Create a spacer above and below the nav

to center the menu between them

*/

header:before,header:after {

content:'';

display: block;

height: 50%;

background: #000;

width: 100%;

}

h1 {

background-image: url(http://imandragrafie.nl/demo/images/menu/polygon1.png);

height: 80px;

margin:0;

padding:0;

text-indent: -9999px;

width: 100px;

position: absolute;

top: 0;

left: 50%;

margin-left: -40px;

}

nav#mainMenu {

width:100%;

text-align: center;

margin:0;

padding:0;

background-color:#000000;

}

nav#mainMenu a {

font-family:"Gill Sans","Gill Sans MT","Myriad Pro","DejaVu Sans Condensed",sans-serif;

font-size:1.2em;

color: #FFF;

text-decoration: none;

vertical-align: middle;

}

/* create a spacer to get those dots */

nav#mainMenu a:after {

content:'\00B7';

color:#2bbfc4;

display: inline-block;

width: 0;

padding: 0 2%;

}

/*remove the dot and give a width to create a space for the image */

nav#mainMenu a.mid-left:after {

width: 120px;

content:'';

}

/* No spacer for the last child */

nav#mainMenu a:last-child:after {

display: none;

}

IMANDRAGRAFIE

HOMEMY STORYGALLERYRATESTERMSCONTACT

存档解决方案

这是非常可能的只是CSS.

要垂直对齐菜单,有一个漂亮的显示：内嵌块技巧使用一个伪元素,将文本拉下来.在我的例子中,它看起来像这样：

nav:before {

display: inline-block;

content: '';

vertical-align: middle;

height: 100%;

}

这样做是因为它放置了一个隐藏的元素,它将自己置于< a>然后被迫在中间排队的链接.它将适用于所有现代浏览器和IE8.

(如果真的真的需要这个工作在IE 6和7,它可以放在一个真正的< div>个人我会允许IE 6和7只是优雅而不垂直的中心.)

这是一个可视化的好方法.垂直块是导航：之前,水平高亮是当前字体大小的理想位置.

>我已经通过删除不需要的列表项元素简化了你的例子

>您可以在底部“运行代码段”.你也可以玩一个this jsBin example.

>我把你的榜样剥夺了裸骨,但是你可以很容易地做出改变

如上所述,请注意,文本的垂直中心将受其线高度的影响,理想的行高将根据字体而改变.您还可以通过略微增加nav的高度来帮助您垂直排列文字：before.

阅读更多关于线高问题here.

CSS / HTML

html,body {

height:100%;

margin:0;

}

/*

- height as a percentage to keep it flexible

- max-height so it doesn't get too big

- min-height so it doesn't get too small

*/

nav {

background:#000;

height:4.3%;

min-height: 2em;

max-height:8em;

text-align:center;

position:relative;

}

/*

- line-height will help get text perfectly vertical (or mess it up for you)

-- line-height will change with each typeface,watch out

more information

-> https://stackoverflow.com/questions/14061228/remove-white-space-above-and-below-large-text-in-an-inline-block-element

*/

nav a {

font-family:Gotham,sans-serif;

color:#FFF;

text-decoration:none;

vertical-align:middle;

line-height:2;

}

/*

- pseudo element to pull the text down to center vertically

- height can be modified if needed to help offset line-height differences between typefaces

*/

nav:before {

display:inline-block;

content:'';

vertical-align:middle;

height:100%;

}

/*

- create a spacer to get those dots

- percentage right and left padding

*/

nav a:after {

content:'\00B7';

display:inline-block;

width:0;

padding:0 2%;

}

/*

- No spacer for the last child

- apply "display: none" to any a:after that shouldn't have a spacer

*/

nav a:last-child:after {

display:none;

}

HOME

MY STORY

GALLERY

RATES

TERMS

CONTACT