Question

我有1个div，有两个单独的文本部分。但是，这些文本部分中的一个比另一个小，使其略低于另一部分。

我希望它在div中垂直和水平居中 - 与较大的文本内联... margin-bottom不起作用，但是margin-left和margin-right是...我该怎么做？三江源。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我就是这样做的：

修复无效的html
将字体大小放在锚点上
垂直对齐锚点
如果您希望文本水平居中，请在div上使用text-align center（而不是左边有边距）

.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

你需要垂直对齐＆＃39; a＆＃39;标签。这个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;
  }

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

3 个答案: