水平メニューの画像を垂直に整列する

Question

水平で、ページの上部にあるナビゲーションメニューの中心に画像（私のロゴ）を配置したいと考えています。これまでのところ、topnav div内の各タグ（私のイメージを含む）は均等に広がっています。私は自分のロゴの両側にある要素を均等に広げたいと思っていますが、私のイメージが真ん中に欲しいです。おそらく私は同じ行に2つのdivを使用し、ロゴを中央に貼り付けるべきでしょうか？

はここに私のHTML

<div class="topnav" id="myTopnav" > 
    <a href="Home%20Page.html">Sustainability</a> 
    <a href="Environment.html">Climate Change</a> 
    <img src="Images/Climate-Hikewhite.png" height="50px" href="Home%20Page.html" /> 
    <a href="DIY.html">Help At Home</a> 
    <a href="Contact.html">Contact Us</a> 
</div> 

であることはここに私のCSS

/*NAVIGATION BAR */ 
/* Add a black background color to the top navigation */ 

.topnav { 
background-color: #000; 
overflow: hidden; 
list-style: none; 
margin: 0; 
padding-top: 5px; 
padding-bottom: 5px; 
display: flex; 
justify-content: space-around; 
text-decoration: none; 
font-size: 24px; 
color: #000; 
width: 100%; 
} 

/* Style the links inside the navigation bar */ 
.topnav a { 
list-style: none; 
margin: 0 2px; 
padding-top: 10px; 
padding-bottom: 5px; 
display: flex; 
justify-content: space-around; 
text-decoration: none; 
font-size: 17px; 
color: #EEE; 
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; 


} 
.titletext { 
list-style: none; 
margin: 0 2px; 
padding-top: 10px; 
padding-bottom: 5px; 
display: flex; 
justify-content: space-around; 
text-decoration: none; 
font-size: 17px; 
color: #FFF; 
font-family: Papyrus, fantasy; 
} 
/* Change the color of links on hover */ 
.topnav a:hover { 
background-color: #000; 
color: green; 
} 

/* Add a color to the active/current link */ 
.topnav a.active { 
background-color: #4CAF50; 
color: white; 
} 

Answer 1

OKですが、私は私はあなたが言っているか知っていると思います。あなたのアンカー要素があなたの.topnavの上に垂直に配置されていないと言っていますか？その場合は、.topnav CSSスタイルにalign-items: centerを追加する必要があります。だからあなたの.topnavのCSSは次のようになります。

.topnav { 
background-color: #000; 
overflow: hidden; 
enter code here list-style: none; 
margin: 0; 
padding-top: 5px; 
padding-bottom: 5px; 
display: flex; 
justify-content: space-around; 
text-decoration: none; 
font-size: 24px; 
color: #000; 
width: 100%; 
align-items: center; 
} 

あなたがここにalign-items詳細を読むことができます：https://css-tricks.com/almanac/properties/a/align-items/