縦の整列が機能していませんCSS HTML

Question

私はリンクの中にテキストを配置する方法をチュートリアルで探しています。 何も助けになりませんでした。私を助けてくれますか？ HTML：

<nav> 

     <a class="but1" href="#"><strong>ART</strong></a> 
     <a class="but2" href="#"><strong>VIDEOS</strong></a> 
     <a class="but3" href="#"><strong>ABOUT</strong></a> 
     <a class="but4" href="#"><strong>CONTACT</strong></a> 

</nav> 

CSS：

nav a { 
    font-size: 500%; 
    text-decoration: none; 
    color: white; 
    Height: 25%; 
    width: 100%; 
    position:absolute; 
    text-align: center; 
    vertical-align: middle; 
    transform: translate(-50%, -100%); 
    left: 50%; 
    } 

.but1 { 
    background-color: #e24e42; 
    top: 25%; 
    } 


.but2 { 
    background-color: #e9b000; 
    top: 50%; 
} 

.but3 { 
    background-color: #eb6e80; 
    top: 75%; 
} 

.but4 { 
    background-color: #008f95; 
    top: 100%; 
} 

私はWeb開発におけるスターターです。正確に2日になる。巨大な間違いがある場合は、私を判断しないでください。

Answer 1

CSSの垂直方向の配置は、わずか数年前の悪夢でした。

vertical-align: middle;のようなものを試してみると、Googleにはまったく気にしなかったことになります。

私はflexboxを見つけた瞬間、その悪夢から目を覚ましました。フレックスボックスの使い方については、この完全なガイドをご覧ください。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

は、私はその目的のために毎回フレキシボックスを使用し、ナビゲーションメニューを作成するために充当さだと思います。

EDIT：

私はそこにされていると私は小さなものが最初に取得することができますどのようにハードを知っています。あなたがウェブデザインを深刻にしたいのであれば、これは大いに起こり、あなたはそれを一人で処理する方法を知っていなければならないことに留意してください。

このバイオリンを見てみましょう：

align-items: centerこれは、垂直方向に中央に責任がある：http://jsfiddle.net/ZTz7Q/2651/

あなたは私たちが子供だけが表示されるべき方法を定義する、親要素のCSSフレキシボックスのプロパティを適用することがわかります主軸上のコンテンツ（デフォルトでは水平）。

justify-content: flex-startこれはかなりtext-align:left

のような、メイン軸上のコンテンツを揃え代わりにコピーのコードを理解し、それを貼り付けるには時間がかかります。改善するのに役立ちます。