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

Question

这是align-items: center有财产的眼睛.它们适用于单行文本,而FAIL适用于多行文本:

这是与align-items: baseline(或flex-start)的眼睛.它们对于多行文本更好,但对所有这些文本都不理想,因为我想将眼睛对准文本第一行的中心:

我想要实现的是:

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

是否可以优雅地使用flexbox属性,而不使用填充或边距？

(这是一个简化的例子.在真正的问题中,我不想引入填充,因为它会影响其他项目.)

这是jsfiddle玩:http://jsfiddle.net/sqp1wdap/

Answer 1

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

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

因此，解决方案是用高度等于文本行高的弹性容器包裹图标。该容器将使图标垂直居中。如果图标比容器大，那么它只会从顶部和底部溢出。

因此，在您的示例中（为了清楚起见，我只是夸大了高度，您也可以尝试使用非常小的值，例如 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 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

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

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

这是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
}

它看起来像这样。