html - 在相邻 block 中底部对齐不同字体大小的文本的正确方法？

Question

我在相邻 block 中有字体大小不同的文本，但我希望两个 block 中的文本彼此底部对齐。更具体地说，我希望 section 在 header 中垂直居中，但我希望文本在 h1 和 nav 中使它们的底部边缘对齐。我可以调整边距或绝对定位以使第二个 block 的文本与第一个 block 对齐，但一旦我缩放页面，对齐就会中断。我有一个 codepen ，这是代码:

HTML:

<header>
  <section>
    <h1>SITENAME</h1>
    <nav role="navigation">
      <ul>
        <li><a href="/">home</a></li>
        <li><a href="/">about</a></li>
        <li><a href="/">stuff</a></li>
        <li><a href="/">blog</a></li>
      </ul>
    </nav>
  </section>
</header>

CSS:

header { width:100%; background-color:#ddd; }

header section {
  width:80%;
  max-width:980px;
  margin:0 auto;
  position:relative;
}

header section h1, header section nav { 
  margin:20px 0 20px 0;
  display:inline-block;
}

header section h1 { font-size:2em; }

header section nav { 
  position:absolute; 
  right:0; 
  text-align:right; 
}

nav ul { margin:0; padding:0;}
nav li { display:inline; }
nav li a { margin-left:2em; text-decoration:none; }
body { margin:0; font-family:sans-serif; }

想法？看起来这一定是一个普遍的需求，但我没有找到。

Answer 1

使用 css transform 会有帮助。这是一个 jsfiddle http://jsfiddle.net/claytonF/34wcu10e/1/

header {
  width:100%;
  background-color:#ddd;
}

header section {
  width:80%;
  max-width:680px;
  margin:0 auto;
  position:relative;
}

header section h1, header section nav 
{ 
  margin:20px 0 20px 0;
  display:inline-block;
}
header section h1, header section nav, header section nav li a 
{
  height:2em;
}

header section h1 { 
  font-size:2em;
}

header section nav { 
  position:absolute; 
  right:0; 
  text-align:right;
  
}

nav ul { margin:0; padding:0;}
nav li { 
  display:block; 
  position:relative; 
  float:left; 
   
}
nav li a { 
  margin-left:2em;
  text-decoration:none;
  display:block;
  transform:translate(0%,50%);
  -webkit-transform:translate(0%,50%);
  -moz-transform:translate(0%,50%);
  -o-transform:translate(0%,50%);
}

body { margin:0; font-family:sans-serif; }

<header>
  <section>
    <h1>SITENAME</h1>
    <nav role="navigation">
      <ul>
        <li><a href="/">home</a></li>
        <li><a href="/">about</a></li>
        <li><a href="/">stuff</a></li>
        <li><a href="/">blog</a></li>
      </ul>
    </nav>
  </section>
</header>

我确实必须为 H1、nav 和 nav li a 元素设置高度。不知道如何避免这种情况。我只是将它们设置为 H1 文本的高度 (2em)。

然后将导航栏设置为 display:block 和 float:left 然后应用 transform:translate(0%,50%);到 nav li a 元素。

希望对您有所帮助。