ナビゲーションバーにテキスト行を中央に配置するにはどうすればよいですか？

私はCSSで本当に新しいです。私は自分のコースの一部であるgoogeランディングページを作成する方法を試しています。ナビゲーションバーから始めています。すでにインラインブロックを使用していましたが、テキストはまだテキストラインの下でテキストの中心ではなく、私のコードは次のようになります：ナビゲーションバーにテキスト行を中央に配置するにはどうすればよいですか？

<!DOCTYPE html> 
<html> 
<head> 
<title>Google Homepage</title> 
<style type="text/css"> 



    .navigation { 
     width: 400; 
     text-align: right; 
    } 

    .navigation ul { 
     list-style-type: none; 
     margin: 0; 
     padding: 0; 
     overflow: hidden; 
    } 

    .navigation li { 

     display:inline-block; 
     text-decoration:none; 
    } 

    .navigation ul li a { 
    text-decoration:none; 
    padding:0 12px; 
    } 

    .navigation #profile-image { 
     text-align: center; 
     height: 50px; 
     border-radius: 50%; 
    } 
</style> 
</head> 
<body> 

<div class="navigation"> 

<ul> 
    <li style="margin: 5px auto;"> Glendon Philipp </li> 
    <li> <a href="#news"> Gmail </a> </li> 
    <li> <a href="#contact"> <img src="img/google-button.jpeg"> </a> </li> 
    <li> <a href="#about"> <img src="img/google-button-notification.jpg"> </a> </li> 
    <li> <a href="#profile-image"> <img id="profile-image" src="img/profile.jpg"> </a></li> 
</ul> 

</div> 

</body> 
</html>

出典

2016-03-28 Glendon Philipp Baculio

あなたはテキストが含まdiv要素の中央に整列したいですか？ – VikingBlooded

はいイメージの真ん中にあります –

：

.navigation { 
    width: 400; 
    text-align: right; 
}

あなたは例えばのような幅の値を追加する必要があります：

.navigation li {  
     display:inline-block; 
     vertical-align: middle; 
     text-decoration:none; 
    }

これは、テキストを画像の垂直中央に揃えます。あなたはマージンとパディングを微調整する必要があります。

はここでフィドルです：https://jsfiddle.net/s04o30ya/

出典

2016-03-28 18:51:19 VikingBlooded

ありがとう、それは私が必要とするものです、垂直方向の整列、私はul上で浮動しようとし、 –

心配しないで、私はcss-tricks.comに行って、そこでいくつか面白いことが行われる方法を見てみましょう。 – VikingBlooded

はい私は間違いなくそれを確認します、ありがとう、私は今lynda.comとtheodinproject.comからあなたがお勧めできるサイトがありますか？それは本当に自分自身を教えることは難しい、偉大なリソースをどこから始めるべきかわからない.. –

これはあなたの大丈夫ですか？ところで

.navigation ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    text-align: center; 
    overflow: hidden; 
}

See this fiddle

が、これは誤りです。ここ屋行く

.navigation { 
    width: 400px; 
    text-align: right; 
}

出典

2016-03-28 18:47:24

彼の質問はちょっと混乱しましたが、実際には、水平ではなく垂直の整列が必要でした。 – VikingBlooded

ああ、いいえ問題ありません。 –

ナビゲーションバーにテキスト行を中央に配置するにはどうすればよいですか？

答えて

関連する問題