<a>要素をflex div内に縦方向に配置するにはどうすればよいですか？

Question

フレックスではなくリンクではなくボタンを中央に置くことができますか？

#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は、1行のテキストを垂直方向にセンタリングするためによく使用されます。ボタンの高さを設定したので、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; 
}