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

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

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

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

<header class="hamburger">
    <h1>Logo</h1>
    <nav></nav>
</header>

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

header:before,header:after {
    content:'';
    display: block;
    height: 50%;
    BACkground: #000;
    width: 100%;
}

这给我们相当于：

<header class="hamburger">
    <div>:before bun</div>
        <h1>Logo</h1>
        <nav></nav>
    <div>:after bun</div>
</header>

>标题：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;
}

<header>
	<h1 title="IMANDRAGRAFIE">IMANDRAGRAFIE</h1> 
	<nav id="mainMenu"><a href="index.html">HOME</a><a href="story.html">MY STORY</a><a href="gallery.php" class="mid-left">GALLERY</a><a href="rates.html" class="mid-right">RATES</a><a href="terms.html">TERMS</a><a href="contact.html">CONTACT</a></nav>
</header>

存档解决方案

这是非常可能的只是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;
}

<nav id="nav-utility">
    <a href="#">HOME</a>
    <a href="#">MY STORY</a>
    <a href="#">GALLERY</a>
    <a href="#">RATES</a>
    <a href="#">TERMS</a>
    <a href="#">CONTACT</a>
</nav>