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

标签 html css responsive-design

我正在开发一个响应式网站并希望将其文本居中。 我可以用行高来做到这一点，但它不会响应，当导航元素变小时，行高保持不变。所以，它基本上搞砸了我的设计。

有什么方法可以使行高响应，或任何其他(响应)方式将文本放置在垂直中心？ 这看起来很简单，但我想不通。

这是一个 fiddle :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;
}

最佳答案

最终产品

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

我们实际上让这件事变得比必要的更难......让我们做一个美味的汉堡包吧!

将导航和 Logo 包裹在 <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/演示片段

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 优雅地降级而不是垂直居中。)

这是一种很好的可视化方式。垂直 block 是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>

关于html - 导航菜单中的响应式垂直居中列表项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25879636/

上一篇：html - 有些字形显示，有些不显示？ Bootstrap 3

下一篇：html - 如何将 background-size 设置为 "cover"，再加上 CSS 中的更多内容？

相关文章：

javascript - 如何防止我的边距崩溃？

jquery - 如何使 lightbox2 响应式

html - 在开发人员工具中测试响应能力时，网站 react 完美，但不是以实际手机屏幕为中心？

CSS - 规则适用于@media(最大宽度 : 550px) but not @media (max-width: 750px)

html - 在 magento 的 CMS 页面中使用静态 block 时没有 CSS

javascript - 下载 Facebook 相册的脚本

html - 如何为导航元素实现相等的响应填充？

javascript - 当文本框 TextMode ="Date"时，如何清除边缘浏览器中输入的日期？

html - 媒体查询最小界限不起作用

javascript - jQuery Tabs 使用 Mobify 在 Carousel 上激活

©2024 IT工具网  联系我们