동일한 div에서 특정 텍스트를 위쪽으로 이동하는 방법은 무엇입니까?

Question

두 개의 텍스트 섹션이있는 div가 하나 있습니다. 그러나이 텍스트 섹션 중 하나는 다른 섹션보다 약간 작으며 다른 텍스트 섹션보다 작습니다.

큰 텍스트의 div-inline에서 세로 및 가로로 가운데에 정렬하고 싶습니다. margin-bottom은 작동하지 않지만 margin-left와 margin-right는 ... 어떻게해야합니까? 이? 고맙습니다.

.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. ORS
4. 수직 앵커를 정렬

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