<a> 요소를 flex div 내에 세로로 가운데에 배치하려면 어떻게합니까?

Question

왜 링크를 사용하지 않고 flex를 사용하여 단추를 가운데에 배치 할 수 있습니까?

이 바보 같은 질문 경우 죄송합니다

#quote-btn-div { 
 
    display: flex; 
 
} 
 
#quote-btn, 
 
#twitter-link { 
 
    background-color: #999; 
 
    /* Green */ 
 
    border: none; 
 
    width: 300px; 
 
    height: 100px; 
 
    margin: 0 auto; 
 
    color: white; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    font-size: 16px; 
 
} 
 
#twitter-link { 
 
    background-color: red; 
 
}

<div id="quote-box"> 
 
    <div id="quote-btn-div"> 
 
    <button id="quote-btn">New Quote</button> 
 
    <a id="twitter-link">Twitter link</a> 
 
    </div> 
 
</div>

, 난 아직 배우는 중이에요.

Answer 1

line-height은 한 줄의 텍스트를 세로로 가운데 맞추기 위해 자주 사용됩니다. 버튼 높이를 설정 했으므로 line-height을 해당 값으로 설정하십시오.

#twitter-link { line-height: 100px; }

#quote-btn-div { 
 
    display: flex; 
 
} 
 
#quote-btn, 
 
#twitter-link { 
 
    background-color: #999; 
 
    /* Green */ 
 
    border: none; 
 
    width: 300px; 
 
    height: 100px; 
 
    margin: 0 auto; 
 
    color: white; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    font-size: 16px; 
 
} 
 
#twitter-link { 
 
    background-color: red; 
 
    line-height: 100px; 
 
}

<div id="quote-box"> 
 
    <div id="quote-btn-div"> 
 
    <button id="quote-btn">New Quote</button> 
 
    <a id="twitter-link">Twitter link</a> 
 
    </div> 
 
</div>

Answer 2

#twitter-link { 
    line-height: 100px; 
}