我意识到关于如何做到这一点有很多问题,但他们所有的解决方案似乎都对我当前的情况没有反应。我在网站顶部有一个横幅,其中有两个 float 列。右栏包含一个导航菜单,我认为这可能是罪魁祸首。
我已经设置了以下jfiddle:https://jsfiddle.net/Lhd0soL5/1/
.container {
max-width: 940px;
margin: 0 auto;
margin-top: 0px;
padding-top: 0px;
box-sizing: border-box;
position: relative;
}
.high {
background-color: #FFF;
}
.high .left-col {
width: 33%;
float: left;
height: auto;
padding: 20px 0px;
}
.high .left-col p {
font-size: 140%;
}
.high .right-col {
width: 67%;
float: right;
height: auto;
top: 50%;
bottom: 50%;
}
.site-nav {
float: right;
}
.site-nav li {
list-style: none;
float: left;
border-right: 1.5px solid;
}
.site-nav li:last-child {
border: none;
}
.site-nav ul {
-webkit-padding-start: 0px;
}
.site-nav a {
display: block;
text-decoration: none;
padding: 5px 20px;
}
/* This is the clear fix method */
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
<div class="high group">
<div class="container">
<div class="left-col">
<p>Company Name</p>
</div>
<aside class="right-col">
<nav class="site-nav">
<ul class="group">
<li><a href="draft1-1.html">Home</a></li>
<li><a href="contact.html" class="last">Contact Us</a></li>
<li><a href="#about">About</a></li>
<li><a href="#methodology">Methodology</a></li>
<li><a href="#">Products</a></li>
</ul>
</nav>
</aside>
</div>
</div>
谢谢!
最佳答案
如果你可以使用flexbox ,您可以使用 justify-content:space- Between
将容器设置为 display:flex
(元素均匀分布在行中;第一项位于起始行,最后一项位于起始行)元素位于最后一行)和 align-items:center
(元素在横轴上居中)。请参阅下面的演示,我稍微简化了 HTML。
<强> jsFiddle
.container {
max-width: 940px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
border: 1px solid;
}
.site-logo {
font-size: 150%;
}
.site-nav ul {
padding: 0;
margin: 0;
}
.site-nav li {
list-style: none;
display: inline-block;
border-right: 1.5px solid;
margin: 0 0 0 10px;
padding: 0 14px 0 0;
}
.site-nav li:last-child {
border: none;
padding-right: 0;
}
<div class="container">
<div class="site-logo">Company Name</div>
<nav class="site-nav">
<ul>
<li><a href="draft1-1.html">Home</a></li>
<li><a href="contact.html" class="last">Contact Us</a></li>
<li><a href="#about">About</a></li>
<li><a href="#methodology">Methodology</a></li>
<li><a href="#">Products</a></li>
</ul>
</nav>
</div>
关于html - 使用CSS垂直居中两个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35247375/