当我放图片时，右边的文字放在底部

Question

这让我发疯。我有一个导航栏，其中有三个 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;
}

我想这对你来说是个简单的问题，但老实说我找不到它发生的原因

Answer 1

您的 #leftside div 不会自动对齐其内容。也加上 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>

Answer 2

尝试为 #leftside img

在 CSS 上添加 display: inline-block;

#leftside img {
    height: 50px;
    display: inline-block;
}

Answer 3

为了解决这个问题，制作#left-side 弹性容器并设置 align-items 属性为居中因为#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;
}

Answer 4

如果我将 display flex 和 align items 也放在 #leftside 上，它会起作用！

谢谢！

当我放图片时，右边的文字放在底部

When I put an image the text at right go at the bootom

html

css

image

vertical-alignment

flexbox