Question

这是具有align-items: center属性的眼睛。它们适用于单行文本，而FAIL适用于多行文本：

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

我想要实现的目标是：

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

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

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

以下是jsfiddle：http://jsfiddle.net/sqp1wdap/

Answer 1

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

将眼睛和文字对齐到flex-start
使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 2

我找到了解决方案，没有更改文本的this.event.request.intent.slots.subject.value属性。

与之前的oluckyman's answer相同，将“眼睛”和“文字”都对准line-height。
在“眼睛”上添加类似于文本高度的隐藏伪元素。
对Eye使用flex-start对齐，它将对齐Eye本身和我们创建的伪元素。

这是JSFiddle的链接和我所做的摘要：

center

它看起来像this。

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
}

那应该是所有你需要的。 Demo.

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 }添加到原始未经修改的小提琴中，您几乎可以看到解决方案盯着您，因为元素.LegendItem_Eye占用父容器的整个高度。

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

因为图标现在已被限制在一个小方块中，因此flex无法在其容器中center显示它，并按照start显示它父规则justify-content: flex-start。

Fiddle。

加成

实际上，图标仍然位于.LegendItem_Eye中心，因为它有$slotWidth = $itemHeight = $fontSize * 1.3;移入，但我们将其限制在$slotWidth方格，而不是完整的父级高度。

<强>逻辑

默认已隐藏项目为align-self: stretch
父.LegendItem有规则align-items: stretch
父.LegendItem有规则justify-content: flex-start
子align-self优先于父align-items
子.LegendItem_Eye没有高度值设置
子.LegendItem_Eye有规则align-items: center
眼睛 -icon 是孩子的孩子
eye -icon是一个字体字符，就像字母表中的任何其他字符一样，因此它只占用.LegendItem_Eye空格并采用$fontSize字体设置

导致

由于1,2,4，孩子fa fa-eye增长到父高和5
eye -icon以.LegendItem_Eye为中心，因为6,7和9

<强>溶液

使用值.LegendItem_Eye
约束孩子.LegendItem_Eye的身高
- 纠正5
- 限制9
- 并取消10
因为$slotWidth 眼睛的3个孩子 - 图标会向上移动

所有规则1到8（规则5除外）仍然有效，只需加载 .LegendItem_Eye

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

6 个答案:

jSFiddle

加成