Question

我有一个项目，我将一个flex菜单放在图片滑块上。我希望项目使用相同的基线，但我不能将它设置为在同一条线上。

a img{
  height: 40px;
}
.links{
  display: flex;
  align-items: baseline;
}

<div class="links">
  <a class="img-link"> <img src="anypicture.jpg"></a>
  <a>Link 1</a>
  <a>Link 2</a>
  <a>Link 3</a>
</div>

https://jsfiddle.net/7xnesjpy/13/

图片的容器略高于文本链接的容器，我该怎么做才能将它们设置为相同的地面/基线

Answer 1

您的图片周围有很多透明空间，但您可以通过添加来修复它保证金给你一个img {}就像这样：

a img{
  height: 40px;
  margin-bottom:-20px;
}

.links{
  display: flex;
  align-items: baseline;
}

Answer 2

当您使用baseline时，img的底部将与文本的底部对齐，如您在此处所示，我在其中添加了边框项目

＆＃13;

a img{
  height: 40px;
  border: 1px solid blue;
}
.links{
  display: flex;
  align-items: baseline;
}
.links a + a {
  border: 1px solid blue;
}

＆＃13;

<div class="links">
  <a class="img-link"> <img src="https://staticaltmetric.s3.amazonaws.com/uploads/2015/10/dark-logo-for-site.png"></a>
  <a>Link 1</a>
  <a>Link 2</a>
  <a>Link 3</a>
</div>

＆＃13;

要使img与文字/链接元素底部对齐，您需要flex-end。

＆＃13;

a img{
  height: 40px;
  border: 1px solid red;
}
.links{
  display: flex;
  align-items: flex-end;
}
.links a {
  border: 1px solid blue;
}

＆＃13;

<div class="links">
  <a class="img-link"> <img src="https://staticaltmetric.s3.amazonaws.com/uploads/2015/10/dark-logo-for-site.png"></a>
  <a>Link 1</a>
  <a>Link 2</a>
  <a>Link 3</a>
</div>

＆＃13;

但正如您在第二个示例中所看到的，img下面仍然存在间隙。

此gap all inline element有，并且为了摆脱这种情况，将img的显示类型更改为block。

＆＃13;

a img{
  display: block;
  height: 40px;
  border: 1px solid red;
}
.links{
  display: flex;
  align-items: flex-end;
}
.links a + a {
  border: 1px solid blue;
}

＆＃13;

<div class="links">
  <a class="img-link"> <img src="https://staticaltmetric.s3.amazonaws.com/uploads/2015/10/dark-logo-for-site.png"></a>
  <a>Link 1</a>
  <a>Link 2</a>
  <a>Link 3</a>
</div>

＆＃13;

Answer 3

你的CSS工作正常，但问题是图像。您的图片中有不需要的空间。现在请看小提琴。

Answer 4

从图像中删除所有填充和边距会修复它。

a img {margin: 0; padding: 0;}

https://jsfiddle.net/7xnesjpy/27/

Flexbox将图像放在顶部，但文本链接放在底部

4 个答案: