CoopDaddio CoopDaddio - 4 months ago 6
HTML Question

How to move specific text upwards within same div?

I have 1 div with two separate sections of text. However, one of these sections of text is smaller than the other, leaving it slightly lower than the other section.

I would like it to be centered both vertically and horizontally within the div - inline with the larger text... margin-bottom is not working, however margin-left and margin-right are... how do I do this? Thankyou.



.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

This is how I would do it:

  1. Fix invalid html
  2. Put the font sizes on the anchors
  3. Vertical align the anchors
  4. If you want the text horizontally centered, then use text-align center on the div (instead of left with margin)

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