如何垂直对齐水平菜单中的项目？

我已经做了一些搜索，并尝试了一些建议，但没有为我工作。如何垂直对齐水平菜单中的项目？

我有一个固定的标题菜单（水平），左侧的标志和右侧的导航。我找不到在此固定标题内垂直对齐徽标和导航链接的方法。

我试过position,display和vertical-align，但无法使其正常工作。另外，出于某种奇怪的原因，我无法为我的徽标DIV定义padding-left，这应该是30x，就像我的导航的padding-right一样。

任何帮助将不胜感激。

直播：http://baskra.com/teste/teste.html

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<link rel="stylesheet" type="text/css" href="style.css" /> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>bask.ra</title> 

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css'> 

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> 

<!-- COMECO DO NIVO SLIDER --> 
<link rel="stylesheet" href="themes/default/default.css" type="text/css" /> 
<link rel="stylesheet" href="nivo-slider.css" type="text/css" /> 
<script src="jquery.nivo.slider.pack.js" type="text/javascript"></script> 
<!-- FIM DO NIVO SLIDER --> 

<!-- COMECO DO MENU FIXO --> 
<script type="text/javascript"> 
jQuery("document").ready(function($){ 

    var nav = $('.menu-fundo'); 

    $(window).scroll(function() { 
     if ($(this).scrollTop() > 0) { 
      nav.addClass("f-menu"); 
     } else { 
      nav.removeClass("f-menu"); 
     } 
    }); 

}); 
</script> 
<!-- FIM DO MENU FIXO --> 

</head> 

<body> 

<div class="menu-fundo"> 
<div class="menu"> 

<script type="text/javascript"> 
$(window).load(function() { 
    $('#slider').nivoSlider(); 
}); 
</script> 

<div class="logo"> 

<img src="images/logo.png" /> 

</div> 

     <ul id="menutop"> 
       <li><a href="#contato">CONTATO</a></li> 
       <li><a href="#equipe">EQUIPE</a></li> 
       <li><a href="#quem">QUEM SOMOS</a></li> 
       <li><a href="#como">COMO FAZEMOS</a></li> 
       <li><a href="#que">O QUE FAZEMOS</a></li> 
     </ul> 
    </div> 
    </div> 

<script> 
$("#menutop a").click(function(){ 
    var menuid = $(this).attr("href"); 
    $("body, html").animate({scrollTop: $(menuid).offset().top - $('.menu').height() }, "slow"); 
    return false; 
}); 
</script> 



<div id="slider" class="nivoSlider theme-default"> 
    <img src="images/slide1.png"/> 
    <img src="images/slide2.png"/> 
    <img src="images/slide3.png"/> 
</div> 

<div class="row"> 

<div class="o-que-fazemos"> 
    <a id="que"></a> 
    <h1 class="o-que-fazemos-title">O QUE FAZEMOS?</h1> 
<h1 class="o-que-fazemos-subtitle">COMUNICAÇÃO + DESIGN</h1> 


<div class="o-que-fazemos-content-1"> 

<br /> 
<br /> 

<b>SUA MARCA VAI ALÉM.</b><br /><br /> 

<b><i>Consolidar uma marca vai além.</i></b><br /><br /> 

Além de um simples nome, razão ou definição, consolidar uma marca depende de uma experiência. E é a partir disto que as ideias surgem. Um novo conceito e uma nova definição de negócio.<br /> 
A <b>BASK.RA</b> nasceu para pensar, criar e gerenciar o posicionamento da sua empresa no mercado. 

</div> 


<div class="o-que-fazemos-content-2"> 

<img src="images/oqfazemos.png" /> 

</div> 

</div> 
</div> 

<div class="row"> 
<div class="como-fazemos"> 
    <a id="como"></a> 

    <h1 class="como-fazemos-title">COMO FAZEMOS?</h1> 

    <div class="como-fazemos-content-1"> 
    <img src="images/comofazemos-content1.png" /> 
    </div> 

    <div class="como-fazemos-content-2"> 
    <img src="images/comofazemos-content2.png" /> 
    </div> 

    <div class="como-fazemos-content-3"> 
    <img src="images/comofazemos-content3.png" /> 
    </div> 

    <div class="como-fazemos-content-4"> 
    <img src="images/comofazemos-content4.png" /> 
    </div> 

    <div class="como-fazemos-content-5"> 
    <img src="images/comofazemos-content5.png" /> 
    </div> 

</div> 
</div> 

<div class="row"> 
<div class="quem-somos"> 
    <a id="quem"></a> 

    <h1 class="quem-somos-title">QUEM SOMOS?</h1> 
    <h1 class="quem-somos-subtitle">VOCÊ COM CERTEZA JÁ OUVIU FALAR DAS FAMOSAS FÓRMULAS DE BHASKARA.</h1> 

    <div class="quem-somos-content-1"> 
    <br /> 
<br /> 
A equação completa de segundo grau agora pode ter mais sentido do que nunca. Pelo menos foi assim para a gente. Aprendemos a enxergar resultados claros e perfeitamente desenhados em cada problemática que analisávamos, e assim encontramos o X. 
<br /> 
<br /> 
Dizem por aí que números não se comunicam. Já nós preferimos pensar que eles ajudam na evolução de qualquer negócio e podem se comunicar muito mais do que imaginamos, inclusive nos inspirando criativamente. 
    </div> 

    <div class="quem-somos-content-2"> 
    <img src="images/quemsomos1.png" /> 
    </div> 

<br /> 
<br /> 
<br /> 
<br /> 
<br /> 

<hr> 

<div class="quem-somos-content-3"> 
<img src="images/quemsomos3.png" /> 
</div> 

<div class="quem-somos-content-4"> 
<br /> 
<br /> 
<img src="images/quemsomos2.png" /> 
</div> 

</div> 
</div> 

<div class="row"> 
<div class="a-equipe"> 
    <a id="equipe"></a> 
    EQUIPE<br /> 
<br /> 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus. 
<br /> 
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis. 
<br /> 
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis. 
<br /> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus. 
</div> 
</div> 

<div class="row"> 
<div class="o-contato"> 
    <a id="contato"></a> 
    CONTATO<br /> 
<br /> 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus. 
<br /> 
Vivamus mollis sed lectus nec malesuada. Maecenas luctus suscipit varius. Sed bibendum luctus ligula, fermentum venenatis arcu interdum eu. Praesent sollicitudin tortor arcu, eu varius nulla consectetur ac. Etiam vel interdum urna. Sed dignissim, quam eu consectetur dictum, felis nulla suscipit dolor, ut tincidunt lorem nisi ut nibh. Mauris aliquam laoreet leo, id bibendum arcu ornare vel. Vivamus ultricies fermentum porta. Praesent et mi tortor. Quisque varius mi ac nibh ultricies, id faucibus orci semper. Maecenas sit amet consectetur purus. Quisque vulputate in felis sit amet convallis. Sed pellentesque, lacus in auctor tincidunt, eros quam pellentesque magna, at rhoncus nulla mauris quis lorem. Maecenas condimentum massa ut bibendum sagittis. Etiam non fringilla felis. 
<br /> 
Curabitur rhoncus ut nibh eget interdum. Donec gravida, nunc gravida egestas tempus, leo urna vulputate ipsum, eget euismod leo enim et mi. Quisque non adipiscing nisi. Morbi a odio non lorem sagittis egestas vel et nunc. Vestibulum et turpis egestas neque blandit porttitor. Phasellus sem tellus, elementum id odio eget, scelerisque tincidunt lectus. In hac habitasse platea dictumst. Phasellus malesuada bibendum leo sit amet commodo. Vivamus vestibulum pulvinar nisl, eget scelerisque est dictum vel. Pellentesque posuere mattis ante, quis venenatis augue. Sed malesuada risus elit, vitae bibendum mi porta nec. Ut vitae purus felis. 
<br /> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis placerat metus, a adipiscing ipsum. Aenean aliquam sed massa ut sagittis. Maecenas feugiat lorem consequat lobortis tincidunt. Ut commodo convallis turpis nec faucibus. Vivamus sed sodales diam. Donec eleifend nisl diam, ac luctus urna consectetur sit amet. Donec eget imperdiet mi, eu tempor ipsum. Nulla dolor eros, interdum vel viverra et, commodo a risus. 
</div> 
</div> 


</body> 
</html>

CSS：

@charset "utf-8"; 
/* CSS Document */ 


html,body { 
    height:auto;  
    margin:0; 
    padding:0; 
    border:0; 
    } 

div { 
    margin:0; 
    border:0; 
    } 

.login { 
    display: table-cell; 
} 

logo { 
    border:0; 
    z-index:9999; 
    float:left; 
    padding-left:30px; 
    } 

    hr { 
    display: block; 
    position: relative; 
    padding: 0; 
    margin: 20px auto; 
    height: 0; 
    width: 50%; 
    max-height: 0; 
    font-size: 1px; 
    line-height: 0; 
    clear: both; 
    border: none; 
    border-top: 2px solid #FFF; 
    border-bottom: 1px solid #FFF; 
} 

.menu-fundo { 
    background: #fff repeat-x 0 0; 
    left: 0; 
    top: 0; 
    z-index: 9999; 
    position:fixed; 
    } 

.f-menu { 
    z-index: 9999; 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    } /* isso vai fazer o menu ficar fixo no topo */ 

.menu { 
height: 100px; 
left: 0; 
top: 0; 
z-index: 9999; 
background: #fff repeat-x 0 0; 
position:fixed; 
width:100%; 
} 

.menu ul { 
    list-style: none; 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:17px; 
    font-weight:bold; 
    position: fixed; 
    top: 0; 
    right: 0; 
    width: 100%; 
    } 

.menu ul li { 
float: right; 
padding-right:30px; 
padding-top:0px; 
} 

.menu ul li:first-child { 
    padding-left: 0; 
    } 

.menu ul li a { 
    display: table-cell; 
    vertical-align: middle; 
    color:#000; 
    text-decoration:none; 
    border-top:3px solid #999; 
    } 

.menu ul li a:hover { 
    color: #6D6D6D; 
    border-top:3px solid #EA0000; 
    } 


.row, .o-que-fazemos, .como-fazemos, .quem-somos, .a-equipe, .o-contato { 
    display: block; 
    float: left; 
    position: relative; 
    overflow: hidden; 
    width: 100%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 

.o-que-fazemos { 
    background-image: url('images/oqfazemosFUNDO.png'); 
    font-family: 'Source Sans Pro', sans-serif; 
    background-repeat: repeat-x repeat-y; 
    height:auto; 
    font-size:28px; 
    padding: 50px; 
    float:left; 
    overflow: hidden; 
    } 

.o-que-fazemos-title { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:80px; 
    text-align:center; 
    color:#ffc709; 
    font-weight:900; 
    letter-spacing: 2px; 
    } 

.o-que-fazemos-subtitle { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:80px; 
    text-align:center; 
    color:#FFF; 
    font-weight:900; 
    letter-spacing: 2px; 
    } 


.o-que-fazemos-content-1 { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:20px; 
    color:#FFF; 
    float:left; 
    margin-left:10%; 
    width: 30%; 
    } 


.o-que-fazemos-content-2 { 
    margin-right:10%; 
    width: 50%; 
    float: left; 
    text-align: right; 
    } 

.como-fazemos { 
    background-image: url('images/comofazemosFUNDO.png'); 
    font-family: 'Source Sans Pro', sans-serif; 
    background-repeat: repeat-x repeat-y; 
    height:auto; 
    font-size:28px; 
    padding: 50px; 
    float:left; 
    overflow: hidden; 
    } 

.como-fazemos-title { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:80px; 
    text-align:center; 
    color:#FFF; 
    font-weight:900; 
    letter-spacing: 2px; 
    } 



.como-fazemos-content-1 { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:20px; 
    color:#FFF; 
    float:left; 
    width: 20%; 
    text-align:center; 
    } 


.como-fazemos-content-2 { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:20px; 
    color:#FFF; 
    margin-left:10%; 
    float: left; 
    text-align:center; 
    } 

.como-fazemos-content-3 { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:20px; 
    color:#FFF; 
    margin-left:3%; 
    width: 20%; 
    float: left; 
    text-align:center; 
    } 
.como-fazemos-content-4 { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:20px; 
    margin-left:10%; 
    color:#FFF; 
    float: left; 
    text-align:center; 
    } 

.como-fazemos-content-5 { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:20px; 
    color:#FFF; 
    width: 20%; 
    float: left; 
    text-align:center; 
    } 

.quem-somos { 
    background-image: url('images/quemsomosFUNDO.png'); 
    font-family: 'Source Sans Pro', sans-serif; 
    background-repeat: repeat-x repeat-y; 
    height:auto; 
    font-size:28px; 
    padding: 50px; 
    float:left; 
    overflow: hidden; 
    } 


.quem-somos-content-1 { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:20px; 
    color:#414042; 
    float:left; 
    margin-left:10%; 
    width: 40%; 
    text-align: left; 
    } 


.quem-somos-content-2 { 
    width: 43%; 
    float: left; 
    text-align: right; 
    } 

.quem-somos-content-3 { 
    float:left; 

    width: 50%; 
    text-align: center; 
    } 


.quem-somos-content-4 { 
    width: 40%; 
    float: left; 
    text-align: center; 
    } 


.quem-somos-title { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:80px; 
    text-align:center; 
    color:#fff; 
    font-weight:900; 
    letter-spacing: 2px; 
    } 

.quem-somos-subtitle { 
    font-family: 'Source Sans Pro', sans-serif; 
    font-size:22px; 
    text-align:center; 
    color:#414042; 
    font-weight:900; 
    letter-spacing: 2px; 
    } 


.a-equipe { 
    background-image: url('images/EQUIPE-FUNDO.png'); 
    font-family: 'Source Sans Pro', sans-serif; 
    background-repeat: repeat-x repeat-y; 
    height:auto; 
    font-size:28px; 
    padding: 50px; 
    } 

.o-contato { 
    background-image: url('images/contato-FUNDO.png'); 
    font-family: 'Source Sans Pro', sans-serif; 
    background-repeat: repeat-x repeat-y; 
    height:auto; 
    font-size:28px; 
    padding: 50px; 
    } 

.banner { 
    position: relative; 
    overflow: auto; 
    } 

.banner li { 
    list-style: none; 
    } 

.banner ul li { 
    float: left; 
    }

来源

2014-03-19 Giovanna Cóppola

你的第一个问题已经解决了现在，这里是你的第二个问题的解决方案是，你可以不给标志填充。

问题出在HTML上，你写的是logo，而CSS没有给logo。感染你的CSS文件类logo不存在。

只是检查你的CSS上传到这里。您在类logo中缺少.。

div.logo { 
    margin: 0; 
    padding-left: 30px; 
}

来源

2014-03-19 18:03:08

我不认为有必要成为div.logo，因为我已经有了.logo。现在我有余量：0; padding-left：30px; padding-top：5px;为我的div.logo和它工作正常。谢谢！ –

我的不好！非常感谢！ –

您可以使用在UL padding属性来获得垂直居中。

ul#menu-top { 
    padding: 20px 0; 
    // Remove your width:100% property 
}

当我测试它时，padding-left工作正常。尝试进行上述更改并重试。希望这能解决你的问题。

这是我的电脑截图。多填充一点以使其更加居中。

enter image description here

来源

2014-03-19 17:52:14

感谢您的垂直对齐的帮助，现在看起来很不错！我不能对我的标志DIV做同样的事情。我错过了什么吗？ –

填充左侧必须工作，可以尝试给图像标签留下余量。 –

如何垂直对齐水平菜单中的项目？

回答

相关问题