Question

我在相邻的块中有字体大小不同的文本，但我希望两者中的文本在底部对齐。更具体地说，我希望section垂直居中于header，但我希望h1和nav中的文字的底边对齐。我可以调整边距或绝对定位以使第二个块的文本与第一个块对齐，但是一旦我缩放页面，对齐就会中断。我有一个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

如果您将 h1和<nav>都设为display:inline-block，那么您将获得默认vertical-align: baseline;（默认情况下）它将根据您的需要精确对齐元素的文本：http://jsbin.com/zohupu/1/edit?html,css,output

否则如果您将元素设置为position:absolute，则将其从其自然流程中移除，您所能做的只是近似值：

header section nav { 
  position:absolute; 
  right:0; 
  line-height:3.1em;      /* added */
  /*text-align:right;   not needed */
}

Answer 2

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

＆＃13;

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; }

＆＃13;

<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>

＆＃13;

我确实要为H1，导航和导航元素设置一个高度。不知道如何避免这种情况。我只是将它们设置为H1文本（2em）的高度。

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

希望有所帮助。

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

2 个答案: