我怎样才能让这些按钮在我的导航栏上垂直居中

我很努力地让这些按钮位于右侧，左侧的标题垂直居中在导航栏上。我没有使用Bootstrap。我尝试了一些填充和边距的组合，似乎无法使其工作。任何人都可以帮忙吗？我怎样才能让这些按钮在我的导航栏上垂直居中

HTML：

<header> 
<nav> 
    <h1>Jason</h1> 
    <div class="navbar-box"> 
     <ul id="navbar-links"> 
      <button> 
       <li><a href="#">About</a></li> 
      </button> 
      <button> 
       <li><a href="#">Portfolio</a></li> 
      </button> 
      <button> 
       <li><a href="#">Contact</a></li> 
      </button> 
     </ul> 
    </div> 
</nav> 
</header>

CSS：

nav { 
    background-color: #061839; 
    color: white; 
    height: auto; 

} 
.navbar-box { 
    background-color: #061839; 
    color: white; 
    height: 25px; 
} 
h1 { 
    margin-top: 5px; 
    padding-top: 40px; 
    padding-left: 30px; 
    font-size: 40px; 
} 
ul { 
    list-style-type: none; 
} 
li a { 
    display: inline; 
    float:right; 
} 
button { 
    background-color: #4D638C; 
    border: none; 
    color: white; 
    margin-right: 20px; 
    padding: 15px 32px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 16px; 
    float:right; 
    border-radius:12px; 

}

来源

2016-04-30 JCode777

有很多问题处理。看看http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally或http://stackoverflow.com/questions/ 396145/how-to-vertical-center-a-div-for-all-browsers – di3

[如何为所有浏览器垂直居中div？]（http://stackoverflow.com/questions/396145/how-垂直中心的所有浏览器） – di3

尝试添加显示：内联块和垂直对齐：中间既标题（H1）和按钮的容器是.navbar-box

来源

2016-04-30 13:16:37 Raf

谢谢！我认为整个过程中的问题是，我在显示器上显示：inline-block在按钮上，而不是h1 ....这会使按钮始终显示在标题下方。 – JCode777

是的，你需要显示两个元素内联块来垂直对齐它们。很高兴我能帮上忙 – Raf

使用保证金自动，应该集中它们

来源

2016-04-30 13:31:23 jkb114

我怎样才能让这些按钮在我的导航栏上垂直居中

回答

相关问题