這讓我發瘋了。我有一個導航欄，其中有三個 div。
每個 div 都有一些垂直和水平居中對齊的文本。
當我在“搜索”文本之前放置影像（是變焦鏡頭的 svg 圖示）時，它會將我的文本“搜索”移動到底部。
這是代碼：
HTML
<nav>
<div id="leftside">
<img src="img/zoom-lens.png" alt="search">
search
</div>
<div id="middle">
Arkadomundo
</div>
<div id="rightside">
Sign Up
</div>
</nav>
CSS
@import url('https://fonts.googleapis.com/css2?family=Press Start 2P&display=swap');
* {
margin: 0;
padding: 0;
}
nav {
height: 70px;
width: 100%;
background-color: #241F1C;
font-family: 'Press Start 2P', cursive;
color: #FFFFFF;
display: flex;
align-items: center;
}
#leftside {
flex-grow: 1;
text-align: left;
margin-left: 10px;
}
#leftside img {
height: 50px;
}
#middle{
flex-grow: 2;
text-align: center;
}
#rightside {
flex-grow: 1;
text-align: right;
margin-right: 10px;
}
我想這對你來說是一個簡單的問題，但老實說我找不到它發生的原因
uj5u.com熱心網友回復：
您的#leftsidediv 不會自動對齊其內容。也添加display: flex; align-items: center;它，所有內容都將垂直居中：
@import url('https://fonts.googleapis.com/css2?family=Press Start 2P&display=swap');
* {
margin: 0;
padding: 0;
}
nav {
height: 70px;
width: 100%;
background-color: #241F1C;
font-family: 'Press Start 2P', cursive;
color: #FFFFFF;
display: flex;
align-items: center;
}
#leftside {
flex-grow: 1;
text-align: left;
margin-left: 10px;
display: flex;
align-items: center;
}
#leftside img {
height: 50px;
}
#middle {
flex-grow: 2;
text-align: center;
}
#rightside {
flex-grow: 1;
text-align: right;
margin-right: 10px;
}<nav>
<div id="leftside">
<img src="https://picsum.photos/80/120" alt="image"> search
</div>
<div id="middle">
Arkadomundo
</div>
<div id="rightside">
Sign Up
</div>
</nav>uj5u.com熱心網友回復：
嘗試display: inline-block;在您的 CSS 上添加#leftside img
#leftside img {
height: 50px;
display: inline-block;
}
uj5u.com熱心網友回復：
為了解決這個問題，制作 #left-side flex 容器并將 align-items 屬性設定為 center，因為 #left-side child 居中。或復制此 CSS 代碼：
@import url('https://fonts.googleapis.com/css2?family=Press Start 2P&display=swap');
* {
margin: 0;
padding: 0;
}
nav {
height: 70px;
width: 100%;
background-color: #241F1C;
font-family: 'Press Start 2P', cursive;
color: #FFFFFF;
display: flex;
align-items: center;
}
#leftside {
flex-grow: 1;
text-align: left;
margin-left: 10px;
display: flex;
align-items: center;
}
#leftside img {
height: 50px;
}
#middle{
flex-grow: 2;
text-align: center;
}
#rightside {
flex-grow: 1;
text-align: right;
margin-right: 10px;
}
uj5u.com熱心網友回復：
如果我將 display flex 和 align items 也放在 #leftside 上，它就可以作業！
謝謝 ！
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/446937.html