将图标垂直于文本第一行的中心对齐

Question

这是具有align-items: center的眼睛align-items: center属性。 对于单行文本，它们是确定的，对于多行文本，它们是失败的：

这是具有align-items: baseline的眼睛align-items: baseline （或flex-start ）。 它们对多行文本更好，但对所有文本都不理想，因为我想将眼睛对准文本第一行的中心：

我想要实现的是：

看到眼睛图像如何居中于文本的第一行？

是否可以使用flexbox属性优雅地执行此操作，而无需使用填充或边距？

（这是一个简化的示例。在实际问题中，我不想介绍填充，因为它会影响其他项目。）

这是jsfiddle可以玩的： http : //jsfiddle.net/sqp1wdap/

Answer 1

我找到了不改变文本的line-height属性的解决方案。

1. 就像oluckyman之前的回答一样，将Eye和Text对齐以flex-start 。
2. 在“眼睛”上添加类似于文本高度的隐藏伪元素。
3. 对Eye使用center对齐，这将使Eye本身和我们创建的伪元素对齐。

这是指向JSFiddle的链接以及我所做的摘要：

.LegendItem {
  min-height: $itemHeight;
  font-size: $fontSize;
  margin: 2px 0;

  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: flex-start;  // <-- Change this
}

.LegendItem_Eye {
  width: $slotWidth;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #bbb;
}
.LegendItem_Eye::before {   // <-- Add this
  content: "A";
  width: 0px;
  visibility: hidden;
}

.LegendItem_Text {
  padding: 0 3px;
  flex: 1;
  background: #eaa;         // <-- Remove align-self
}

它看起来像这样 。

Answer 2

我找到了解决方案： http : //jsfiddle.net/sqp1wdap/3/

1. 对齐眼睛和文字以flex-start
2. 使文本的line-height与“眼睛高度”相同

这是编辑后的代码：

.LegendItem_Eye {
  width: $slotWidth;
  display: flex;
  justify-content: center;
  align-items: flex-start; // ← edit (1)
  background: #eee;
}
.LegendItem_Text {
  padding: 0 3px;
  flex: 1;
  align-self: flex-start; // ← edit (1)
  background: #eaa;
  line-height: $fontSize; // ← edit (2)
}

这是它的样子：

Answer 3

我不确定是否有一种优雅的方法可以用flex来做到这一点，但是我可以为您提供同样的破解，就我所知，这不会影响任何其他元素：

您可以为font-awesome.css添加自定义样式

.fa{
    position: absolute;
    top: 0;
    left: 0;
    text-align:center;
    padding:3px;
}

---

对于您的自定义样式，您可以执行以下操作：

.LegendItem_Eye {
  width: $slotWidth;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  position: relative; /* Added this new rule */
}

我知道这不是适当的解决方案，但是您可以尝试一下，除非它会损害其他元素。 :)

jSFiddle

Answer 4

.LegendItem_Eye {
  width: $slotWidth; // keep width
  float:left; // float left
  line-height:1.3; // define line height
} 

这应该是你所需要的 。 演示

Answer 5

当然，如果图标的高度等于行的高度，它将被“对齐”到第一行。

通常，这两件事会有所不同。 您实际上不能在不影响视觉设计的情况下更改线条高度或图标高度。

因此，解决方案是用高度等于文本行高的flex容器包装图标。 该容器将使图标垂直居中。 如果图标大于容器，则它将仅从顶部和底部溢出。

因此，在您的示例中（为了清楚起见，我只是夸大了高度，您也可以尝试使用很小的值，例如8px并查看它在两种情况下如何工作）

.LegendItem_Eye {
  width: $slotWidth;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #eee;
  height: 100px; /* <-- set this */
}

.LegendItem_Text {
  padding: 0 3px;
  flex: 1;
  background: #eaa;
  line-height: 100px; /* <-- equal to this, no need to set this, just use right value above */
}

请注意，您实际上不需要更改文本的行高，只需将眼图容器的高度设置为该值即可。

小提琴适用于行高大于图标的情况： http : //jsfiddle.net/ofdwemva/

小提琴适用于行高小于图标的情况： http : //jsfiddle.net/ofdwemva/1/

Answer 6

（2017年7月）虽然解决方案（和其他答案）成功了，但他们都错过了最直接，最容易修改的答案。

首先将* { outline: 1px dashed }到未修改的原始Fiddle中，您几乎可以看到解决方案将您作为元素盯着您.LegendItem_Eye占用父容器的整个高度。

由于eye- icon是方形的，因此您可以简单地将height: $slotWidth添加到.LegendItem_Eye ，其余部分由flex进行。

因为该图标现在已被限制在一个小正方形内，所以flex根本没有空间将其放置在其容器的center ，并按照父规则justify-content: flex-start在start显示它。

小提琴 。

加成

实际上，该图标仍位于.LegendItem_Eye中心，因为它具有$slotWidth = $itemHeight = $fontSize * 1.3; 移入，但我们将其限制为$slotWidth正方形，而不是整个父高度。

逻辑

1. 弹性商品的默认值为align-self: stretch
2. parent .LegendItem具有规则align-items: stretch
3. parent .LegendItem具有规则justify-content: flex-start
4. 子align-self优先于父align-items
5. child .LegendItem_Eye没有设置高度值
6. 子.LegendItem_Eye具有规则align-items: center
7. eye- icon 是 child .LegendItem_Eye的孩子
8. eye -icon是一个字体字符，就像字母表中的其他任何字符一样，因此它仅占用给定的$fontSize空间并采用fa fa-eye字体设置

导致

9. child .LegendItem_Eye由于1、2、4和5而增长到父母身高
10. 眼 -icon在居中.LegendItem_Eye由于6,7和9

解

11. 用值$slotWidth约束子.LegendItem_Eye高度

    • 纠正5
    • 限制9的增长
    • 并取消10的视觉效果

12. 由于.LegendItem_Eye的3个子项， 眼睛图标将向上移动

所有规则1至8（规则5除外）仍然有效，仅在 $slotWidth