在导航栏内垂直对齐所有内容

时间：2018-05-17 15:41:50

标签： html css

我试图将所有内容垂直放在导航栏的容器内，称为（标题区域），以便所有内容都是内联的。目前，img，左导航和右导航都在容器中以不同方式对齐。

也欢迎另一种解决方案。

/*-----Global Styles-----*/
html {
  box-sizing: border-box;
}

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

body {
  font-family: 'HKGroteskRegular';
}

*, *:before, *:after {
  box-sizing: inherit;
}


/*--------------Header-Navigation--------------*/

.header-area{
  position: relative; 
  top: 0; 
  left: 0; 
  width: 100%; 
  z-index: 9999; 
  padding: 9px 97px 26px 98px;
  height: 105px;
  margin: 0 auto;
}

.logo-wrap{
  float: left;
  width: auto;
}

.main-logo{
  width: 212px; 
  float: left;
}

.main-logo a{
  float: left;
}

.main-logo img{
  width: 100%;
}

.main-nav{
  float: left;
  margin: 0;
}

.main-nav ul li{
  display: inline-block; 
  padding: 0 25px; 
  position: relative;
}

.main-nav ul li:after{
  position: absolute; 
  top: 50%; 
  right: 0; 
  width: 24px; 
  height: 2px; 
}

.main-nav ul li:last-child{
  padding-right: 21px;
}

.main-nav ul li:last-child:after{
  display: none;
}

.main-nav ul li a{
  color: #0c225f;
  padding: 2.5px 0;
  text-decoration: none;
  font-family: 'HKGroteskBold';
  font-size: 19px;
}

.header-right{
  float: right; 
  width: auto;
  display: flex;
  align-items: center;
}

.header-right a{
  vertical-align: middle;
  display: flex; 
  align-items: center;
  text-decoration: none;  
}

.phone {
  padding: 0 20px 0 10px;
}
<!DOCTYPE html>
 <html lang="en">
 <head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/hk-grotesk" type="text/css"/>
<link rel="stylesheet" href="css/untitled.css">
<title>Document</title>
</head>
<body>
<div class="mainwrap">
<!--Header-->
<header class="header-area">
        <div class="logo-wrap">
            <div class="main-logo">
                <a href="#"><img src="Assets/logo.png" alt="pd-logo"></a>
            </div>
        </div>
        <div class="header-left">
            <nav class="main-nav">
                <ul id="menu-main-menu" class="menu">
                    <li><a href="#">Who We Are</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Stories</a></li>
                    <li><a href="#">Career</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>                
            </nav>
            <div class="header-right">
                <a href="#">Give us a Call<img class="phone" src="Assets/Phone.svg">0123456789</a>
            </div>
        </div>
</header>
</div>
</body>
</html>

3 个答案:

答案 0 :(得分：0)

将以下样式添加到menu-main-menu ul 

display: flex;
align-items: center;

答案 1 :(得分：0)

您的.logo-wrap值的float值为left，因此您需要确保其他孩子的质量与inline相似。为此，请在float: left;课程中添加header-left样式。在这个例子中，我缩小了字体大小和填充以演示新的浮点值和填充。

我强烈建议您研究'flex'以对齐您的导航。使用flex，您可以将每个导航项（徽标，链接，按钮）视为子项，并将它们与justify-content: center;垂直对齐。这样您就不必担心浮动或填充问题了。

html {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  font-family: 'HKGroteskRegular';
}

*, *:before, *:after {
  box-sizing: inherit;
}


/*--------------Header-Navigation--------------*/

.header-area{
  position: relative; 
  top: 0; 
  left: 0; 
  width: 100%; 
  z-index: 9999; 
  padding: 9px 97px 26px 98px;
  height: 105px;
  margin: 0 auto;
}

.header-left {
  float: left; /* added */
  padding: 24px 0; /* updated */
}

.logo-wrap{
  float: left;
  width: auto;
}
.main-logo{
  width: 48px; /* updated */ 
  float: left;
  padding: 24px 0; /* added */
}
.main-logo a{
  float: left;
}
.main-logo img{
  width: 100%;
}
.main-nav{
  float: left;
  margin: 0;
}
.main-nav ul { 
  padding: 0; /* added */
  margin: 0; /* added */
}
.main-nav ul li{
  display: inline-block; 
  padding: 0 6px; 
  position: relative;
}
.main-nav ul li:after{
  position: absolute; 
  top: 50%; 
  right: 0; 
  width: 24px; 
  height: 2px; 
}
.main-nav ul li:last-child{
  padding-right: 21px;
}
.main-nav ul li:last-child:after{
  display: none;
}
.main-nav ul li a{
  color: #0c225f;
  padding: 2.5px 0;
  text-decoration: none;
  font-family: 'HKGroteskBold';
  font-size: 8px;
}

.header-right {
  float: right; 
  width: auto;
  display: flex;
  align-items: center;
}
.header-right a {
  vertical-align: middle;
  display: flex; 
  align-items: center;
  text-decoration: none;  
  font-size: 8px; /* added */
}

.phone {
  padding: 0 20px 0 10px;
}
<html lang="en">
 <head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/hk-grotesk" type="text/css"/>
<link rel="stylesheet" href="css/untitled.css">
<title>Document</title>
</head>
<body>
<div class="mainwrap">
<!--Header-->
<header class="header-area">
        <div class="logo-wrap">
            <div class="main-logo">
                <a href="#"><img src="Assets/logo.png" alt="pd-logo"></a>
            </div>
        </div>
        <div class="header-left">
            <nav class="main-nav">
                <ul id="menu-main-menu" class="menu">
                    <li><a href="#">Who We Are</a></li>
                    <li><a href="#">Products</a></li>
                    <li><a href="#">Stories</a></li>
                    <li><a href="#">Career</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>                
            </nav>
            <div class="header-right">
                <a href="#">Give us a Call<img class="phone" src="Assets/Phone.svg">0123456789</a>
            </div>
        </div>
</header>
</div>
</body>
</html>

答案 2 :(得分：0)

您使用<WrappedComponent {...this.props} />实现此目的。在display: flex;align-items:center;。

  

请以整页模式运行代码段

＆＃13;
＆＃13; 
..header-area
＆＃13; 
/*-----Global Styles-----*/
html {
  box-sizing: border-box;
}

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

body {
  font-family: 'HKGroteskRegular';
}

*, *:before, *:after {
  box-sizing: inherit;
}


/*--------------Header-Navigation--------------*/

.header-area{
  position: relative;  
  width: 100%; 
  z-index: 9999; 
  padding: 9px 10px 26px 10px; 
  height: 105px;
  margin: 0 auto;
  display: flex;
  align-items:center;
}



.main-logo img{
  width: 100%;
}

.menu {
 padding-left: 0;
 display: flex;
}

.main-nav{
  margin: 0;
}

.main-nav ul li{
  display: inline-block; 
  padding: 0 25px; 
  position: relative;
}

.main-nav ul li:after{
  position: absolute; 
  top: 50%; 
  right: 0; 
  width: 24px; 
  height: 2px; 
}

.main-nav ul li:last-child{
  padding-right: 21px;
}

.main-nav ul li:last-child:after{
  display: none;
}

.main-nav ul li a{
  color: #0c225f;
  padding: 2.5px 0;
  text-decoration: none;
  font-family: 'HKGroteskBold';
  font-size: 12px;
}

.header-right{
  width: auto;
  display: flex;
  align-items: center;
  margin-left:auto;
  font-size: 12px;
}

.header-right a{
  vertical-align: middle;
  text-decoration: none;  
}

.phone {
  padding: 0 20px 0 10px;
}
＆＃13;
＆＃13;
＆＃13;

  

为了演示目的，我更改了字体大小

相关问题
最新问题