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

时间：2014-09-16 22:52:07

标签： html css css3 responsive-design

我正在处理一个快速响应的网站，并希望将其置于文本的中心位置。 我可以用行高来做到这一点，但是它不会响应，当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;
}

4 个答案:

答案 0 :(得分：6)

最终产品

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

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

将导航和徽标包裹在<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，水平突出显示是当前字体大小的理想位置。

Screenshot

  • 我通过删除不需要的列表项元素

    • 简化了您的示例

  • 您可以在底部“运行代码段”。你也可以玩this jsBin example。

  • 我已将您的示例剥离为裸骨，但您可以轻松进行更改

正如所讨论的那样，请注意文本的垂直中心将受其line-height影响，理想line-height将根据字体而变化。您还可以通过略微增加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,"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>
 

答案 1 :(得分：3)

CSS表格显示是垂直居中对齐内容的有效方式：

#nav-utility ul { display: table; height: 100%; }
#nav-utility li { display: table-cell; vertical-align: middle; }

由于表格单元格具有可变宽度，因此第3个和第4个单元格之间的边框可能与页面的水平中心不对齐。因此，您需要将菜单分成两个菜单并使用绝对定位：

#nav-utility { position: relative; }
#nav-utility ul { position: absolute; top: 0; }
#nav-utility ul:nth-child(1) { right: 50%; }
#nav-utility ul:nth-child(2) { left: 50%; }

将所有这些放在一起并添加重置，伪子弹和装饰你得到这个堆栈片段：

＆＃13;
＆＃13; 
html, body {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
}
h1 {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    margin: 0 0 0 -43px;
    width: 87px;
    height: 71px;
    background-image: url(http://dummyimage.com/87x71/999/000&text=LOGO+87x71);
    text-indent: -9999px;
}
#nav-utility {
    position: relative;
    margin: 0;
    padding: 0;
    height: 4.28%;
    color: #2BBFC4;
    background-color: #000000;
}
#container {
    height: 95.7%;
    background: url(http://lorempixel.com/400/400/sports/1/) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#nav-utility ul {
    display: table;
    position: absolute;
    top: 0;
    margin: 0;
    padding: 0;
    height: 100%;
    list-style: none;
}
#nav-utility ul:nth-child(1) {
    right: 50%;
    margin-right: 53px;
}
#nav-utility ul:nth-child(2) {
    left: 50%;
    margin-left: 53px;
}
#nav-utility li {
    display: table-cell;
    vertical-align: middle;
}
#nav-utility li:nth-child(n + 2) {
    padding-left: 10px;
}
#nav-utility li:nth-child(n + 2):before {
    content: "\00B7";
    padding-right: 10px;
}
#nav-utility a {
    font-family: sans-serif;
    font-size: 20px;
    color: #FFFFFF;
    text-decoration: none;
}
#nav-utility a:hover {
    margin-bottom: -1px;
    border-bottom: 1px solid #196595;
}
#nav-utility a:active {
    font-weight: bold;
}
＆＃13; 
<h1 title="test">test</h1>
<nav id="nav-utility">
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">MY STORY</a></li>
        <li><a href="#">GALLERY</a></li>
    </ul>
    <ul>
        <li><a href="#">RATES</a></li>
        <li><a href="#">TERMS</a></li>
        <li><a href="#">CONTACT</a></li>
    </ul>
</nav>
<div id="container"></div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

我不认为这可以使用CSS完成。 这是使用JS的解决方案：

您可能也想检查这些：

＆＃34;自适应字体大小＆＃34;目前还不支持所有浏览器/设备。

使用＆＃34;响应式字体大小＆＃34;和FlowType，将允许在所有设备上以一致的方式计算字体。下一步是添加＆＃34; padding-top＆＃34;和＆＃34; padding-bottom＆＃34;到以下选择器：＆＃34; nav li a＆＃34;。您可以使用＆＃34;％＆＃34;或＆＃34; px＆＃34;对于填充，你应该摆脱＆＃34;线高＆＃34;属性。

答案 3 :(得分：0)

使用CSS3转换有一种简单的方法。

您需要在<div class="align-vert">附近添加一个容器ul：

<h1 title="test">test</h1>
<nav id="nav-utility">
  <div class="align-vert">
    <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>
  </div>
</nav>

和一个新的课程：

.align-vert {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

请参阅http://codepen.io/raad/pen/Evtmi（我尝试了导航尺寸，以便您可以更轻松地查看垂直对齐方式）。

缺点是您只能从IE9开始获得本机IE支持（尽管可能有一种使用MS矩阵过滤器的方法 - 请参阅http://caniuse.com/#feat=transforms2d）。

相关问题
最新问题