Question

我一直在尝试解决这个问题。我想学习的是使用语义HTML来了解将元素垂直置于导航中心的不同方法。我希望徽标在左侧，导航在右侧。

我尝试在我的nav元素上使用float，但是徽标会损坏并且不会垂直居中。我为此使用了clearfix，但仍然找不到找到徽标和导航垂直居中的方法。

您能帮我吗？并请解释你的答案？然后，如果可能的话，能否请您使用我的html的确切格式向我展示其他将徽标（左）和导航（右）垂直居中的方法？

这是我的代码： https://codepen.io/yortz/pen/pQdKWd

HTML

  <!-- HEADER -->
  <header>
    <!-- LOGO -->
    <a href="#"><img id="site-logo" src="http://lorempixel.com/190/25/" alt="Bookworm"></a>
    <nav>
      <ul class="clearfix">
        <li><a href="#">About</a></li>
        <li><a href="#">Articles</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">Get in Touch</a></li>  
      </ul>
    </nav>
  </header>

CSS

* {
  box-sizing: border-box;
}

/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
  background-color: #ccc;
}
nav {
  background-color: aqua;
}

/* CENTERING NAVIGATION */
header {
  width: 100%;
}
#site-logo,
  nav {
  display: inline-block;
  vertical-align: middle;
}
nav ul {
  list-style-type: none;
  padding-left: 0;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  border: 1px solid red;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: red;
  color: #fff;
}

/* CLEAR FLOATS */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

请帮助。谢谢！

Answer 1

我将使用flexbox在导航中定位

header {
   display: flex;
   justify-content: space-between; // pushes the logo to the left and the nav to the right
   align-items: center; // center aligns children of nav vertically
}

如果您想在不使用flexbox的情况下实现类似的效果，则可以绝对放置徽标：

header {
  position: relative; // with this all children can be positioned absolutely, relative to the header
  text-align: right; // this aligns the nav to the right of the header
}

header > a {
  position: absolute; // positions the logo absolute, relative to header
  top: 50%; // aligns the logo in the middle of the relative parent
  left: 0; // aligns the logo to the left edge of the relative parent
  transform: translateY(-50%); // changes the coordinates of the logo, to center it vertically (y-axis)
}

nav {
  text-align: left; // just used to reset the text-alignment in the nav elements
}

我会考虑使用类而不是选择a-tag，例如CSS中的<a class="logo" href="...">...</a>，然后选择header .logo {...}，而不是header > a {}。如果您在标头中添加更多元素，那将是将来的证明。

快速提示：如果徽标高于导航，则会溢出父容器，因此您需要修改父容器的高度以解决此问题。如果可以保证，导航栏总是比徽标高，那么这对您来说就不成问题，您可以保持页眉的高度不变。

Answer 2

使用float left和right并将padding赋予徽标以垂直对齐中心

* {
  box-sizing: border-box;
}

/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
background-color: #ccc;
}
.logo{
  float:left;
}
.logo img{
  padding:24px 10px;
}
nav {
	background-color: aqua;
  float:right;
}

.clearfix{
  clear:both;
}

/* CENTERING NAVIGATION */
header {
	width: 100%;
}
#site-logo,
nav {
  display: inline-block;
  vertical-align: middle;
}
nav ul {
  list-style-type: none;
  padding-left: 0;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  border: 1px solid red;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: red;
  color: #fff;
}




/* CLEAR FLOATS */
.clearfix::after {
	content: "";
	display: table;
	clear: both;
}

      <!-- HEADER -->
      <header>
        <!-- LOGO -->
        <a href="#" class="logo"><img id="site-logo" src="http://lorempixel.com/190/25/" alt="Bookworm"></a>
        <nav>
          <ul class="clearfix">
            <li><a href="#">About</a></li>
            <li><a href="#">Articles</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Get in Touch</a></li>  
          </ul>
        </nav>
        <div class="clearfix"></div>
      </header>

Answer 3

如果您想使元素垂直居中，则可以将align-content与display: flex一起使用。

Answer 4

希望这会有所帮助。我对您的jfiddle链接进行了一些更改，并将其粘贴到此处。只是CSS更改。

    * {
  box-sizing: border-box;
}

/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
background-color: #ccc;
 width:100%;
  display:block;
}
nav {
}




/* CENTERING NAVIGATION */
header {
    width: 100%;
}
#site-logo{
  display:inline-block;
  vertical-align:middle;
    width:calc(20% - 2px);
}
nav {
  display: inline-block;
  vertical-align: middle;
  position:relative;
  width:calc(80% - 2px);

}
nav ul {
  list-style-type: none;
  padding-left: 0;
  display:inline-block;
  position:relative;
  left:76%;
  background-color: aqua;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  border: 1px solid red;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: red;
  color: #fff;
}
/* CLEAR FLOATS */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

Answer 5

您需要像这样修改代码：

* {
  box-sizing: border-box;
}

/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
background-color: #ccc;
}
nav {
    background-color: aqua;
}
/* CENTERING NAVIGATION */
header {
    width: 100%;
      display: table;
    vertical-align: middle;
}
.logo-wrapper{
  display: table-cell;
    vertical-align: middle;
}
#site-logo{
  display: inline-block;
  vertical-align: middle;
}
nav{
  display: table-cell;
    float: right;
}
nav ul {
  list-style-type: none;
  padding-left: 0;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  border: 1px solid red;
  padding: 10px 15px;
  display: block;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: red;
  color: #fff;
}
/* CLEAR FLOATS */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

然后像这样编辑HTML锚标记：

<a href="#" class="logo-wrapper"><img id="site-logo" src="http://lorempixel.com/190/25/" alt="Bookworm"></a>

Answer 6

很多答案了。这是我的。我将徽标作为<ul>元素放在li内。我正在将<ul>设为flex容器，最重要的是：第一个列表项右边的margin:auto。

nav ul li:first-child {
 margin:0 auto 0 0
}

* {
  box-sizing: border-box;
}




/* HIGHLIGHTING NAVIGATION ELEMENTS */
header {
background-color: #ccc;
}
nav ul {
	background-color: aqua;
  display:flex; 
}
nav ul li a{height:47px;}


/* CENTERING NAVIGATION */
header {
	width: 100%;
}
#site-logo,
nav {
  
  vertical-align: middle;
}
nav ul {
  list-style-type: none;
  padding-left: 0;
}
nav ul li:first-child {
 margin:0 auto 0 0
}
nav ul li a {
  border: 1px solid red;
  padding: 15px;
  display: block;
  text-decoration: none;
}
nav ul li a:hover {
  background-color: red;
  color: #fff;
}
nav ul li:first-child a{padding:10px} 



/* CLEAR FLOATS */
.clearfix::after {
	content: "";
	display: table;
	clear: both;
}

      <!-- HEADER -->
      <header>
        <!-- LOGO -->
        
        <nav>
          <ul class="clearfix">
            <li><a href="#"><img id="site-logo" src="http://lorempixel.com/190/25/" alt="Bookworm"></a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Articles</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Get in Touch</a></li>  
          </ul>
        </nav>
      </header>

如何将徽标垂直对齐到标题的左移和导航右移？

6 个答案: