如何在同一个div内向上移动特定文本？

Question

我有1div和两个独立的部分文本。然而，这些文本中的一节比另一节小，使其略低于另一节。

我希望它的中心在垂直和水平内的div -内联与较大的文本.边距-底部不工作，但边距-左和边-右是.我该怎么做？谢谢你。

​

.portfolioHeader {
  position: relative;
  font-family: coolfont;
  top: 20px;
  font-size: 55px;
  color: black;
  margin-left: 70px;
  text-align: left;
}
a.miniheader {
  text-decoration: none;
  margin-left: 20px;
}
span.smallerish {
  font-size: 35px;
  color: #3F3F3F;
  text-decoration: none;
}

<div class="portfolioHeader"><a class="header" href="http://www.coopertimewell.com/portfolio">Portfolio ><a class = "miniheader" href="http://www.coopertimewell.com/portfolio/website-design"><span class = "smallerish">di Matteos</span></a></a>
</div>

​

Answer 1

我就是这样做的：

1. 修正无效的html
2. 将字体大小放在锚上
3. 垂直对齐锚
4. 如果您希望文本以水平为中心，那么在div上使用文本对齐中心(而不是左加边距)。

​

.portfolioHeader {
  position: relative;
  font-family: coolfont;
  top: 20px;
  color: black;
  text-align: center;
}

a.header {
  font-size: 55px;
  vertical-align:middle;
}

a.miniheader {
  font-size: 35px;
  text-decoration: none;
  margin-left: 20px;
  vertical-align:middle;
}
span.smallerish {
  color: #3F3F3F;
  text-decoration: none;
}

<div class="portfolioHeader">
  <a class="header" href="http://www.coopertimewell.com/portfolio">Portfolio &gt;</a>
  <a class="miniheader" href="http://www.coopertimewell.com/portfolio/website-design"><span class = "smallerish">di Matteos</span></a>
</div>

​

Answer 2

设置锚标签的垂直属性

.portfolioHeader a
{
        vertical-align: middle;
}

Answer 3

你需要垂直对齐'a‘标签。这个css应该会有帮助。

.portfolioHeader {
   color: black;
   display: table;
   font-family: coolfont;
   font-size: 55px;
   margin-left: 70px;
   position: relative;
   text-align: left;
   top: 20px;
   vertical-align: middle;
  }

  a {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
  }

  a.miniheader {
      left: 30px;
      position: relative;
      text-decoration: none;
      top: -5px;
  }
  span.smallerish {
      color: #3f3f3f;
      font-size: 35px;
      text-decoration: none;
  }