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

Question

我正在开发一个响应式网站,并希望将其文本集中在一起.我可以用行高来做这个,但是它不会响应,当nav元素变小时,行高保持不变.所以,它基本上搞砸了我的设计.

有没有办法让行高响应,或任何其他(响应)方式将文本放在垂直中心？这似乎是一件简单的事情,但我无法弄明白.

这是一个小提琴:http://jsfiddle.net/4zahumwm/

HTML:

<h1 title="test">test</h1>
<nav id="nav-utility">
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">MY STORY</a></li>
        <li class="mid-left"><a href="#">GALLERY</a></li>
        <li class="mid-right"><a href="#">RATES</a></li>
        <li><a href="#">TERMS</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>

<div id="container"></div>

CSS:

html, body{
    width:100%; height:100%;
    margin:0; padding:0;    
}

html {  
}

div#container{
    width:100%;
    height:95.7%;

    background: url(background/monitor/IMG_5929.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;}

h1{
    background-image:url(images/menu/polygon.png);
    display: block;
    height: 71px;
    left: 50%;
    margin:0; padding:0;    
    margin-left: -43px;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    width: 87px;
    z-index: 1;

}

nav{
    width:100%;
    height:4.28%;
    /*min-height:40px;*/

    margin:0; padding:0;    

    background-color:#000000;

    list-style:none;
    text-align:center;
}

li, ul, a{
    margin:0; padding:0;    
    height:100%;
}

#nav-utility li{font-size:110%;color:#2bbfc4;}
#nav-utility li:before{content:'\00B7';padding-right:20px; padding-left:-10px;}
#nav-utility li:first-child:before{content:normal;}
#nav-utility li:last-child{padding-right:0;}
#nav-utility li:first-child{margin-left:-8px;}
#nav-utility li:nth-child(4):before{content:normal;}

nav ul{
}

nav li{
    display: inline-block;
    vertical-align:middle;
}

nav li a{
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;

    font-size:20px;
    color:white;

    text-decoration:none;
    line-height:4.28%;
}

nav li a:hover{
    border-bottom: 1px solid #196595;
    padding-bottom:1px;
}

nav li a:active{
    font-weight:bold;
}

nav ul li{
    margin: 0 10px 0 10px;
}

nav li.mid-left{
    margin-right: 63px; 
}
nav li.mid-right{
    margin-left: 63px;
}

Answer 1

最终产品

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

实际上,我们正在努力做到这一点......让我们做一顿美味的汉堡!

将导航和徽标包裹在<header>:

<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>

• 在header:before与header:after各给予相同的百分比高度

• 的<header>容器控制伪元件的高度(:before,:after)的儿童

• 该<nav>被包含在其之间并完全垂直居中.

HTML/CSS/Demo片段

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", Helvetica, Arial, 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就可以实现这一点.

要垂直对齐菜单,有一个漂亮的display: inline-block技巧,使用一个将拉下文本的伪元素.在我的例子中它看起来像这样:

nav:before {
    display: inline-block;
    content: '';
    vertical-align: middle;
    height: 100%;
}

这是有效的,因为它放置了一个不可见的元素,它将自己定位在<a>链接的左侧,然后强制在中间排列.它适用于所有现代浏览器和IE8 +.

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

这是一种可视化的好方法.垂直块是nav:before,水平突出显示是当前字体大小的理想位置.

• 我通过删除不需要的列表项元素简化了您的示例

• 您可以在底部"运行代码段".你也可以玩这个jsBin例子.

• 我已经将你的例子剥夺了裸露的骨头,但你可以很容易地做出改变

如上所述,请注意文本的垂直中心将受其影响,line-height理想状态line-height将根据字体而变化.您还可以通过稍微增加高度来帮助垂直排列文本nav:before.

在此处阅读有关行高问题的更多信息.

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,"Helvetica Neue",Helvetica,Arial,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>