Wie verschiebe ich bestimmten Text innerhalb desselben div?

Question

Ich habe 1 div mit zwei separaten Textabschnitten. Einer dieser Textabschnitte ist jedoch kleiner als der andere und bleibt etwas tiefer als der andere.

Ich möchte, dass es vertikal und horizontal innerhalb des div - inline mit dem größeren Text zentriert ist ... margin - bottom funktioniert nicht, aber margin - left und margin - right sind ... wie mache ich das Dies? Vielen Dank.

.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

Dies ist, wie ich es tun würde:

1. Fix ungültig html
2. Setzen Sie die Schriftgrößen auf dem anch ors
3. Vertikal ausrichten, die Anker
4. Wenn Sie den Text horizontal zentriert, dann text-align Zentrum auf dem div verwenden möchten (anstelle von links mit Rand)

.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

Stellen vertikale Eigenschaft Ankertag

.portfolioHeader a 
{ 
     vertical-align: middle; 
} 

Answer 3

Sie müssen die "a" -Tags vertikal ausrichten. Dieses CSS sollte helfen.

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