Выровнять значок по вертикали в центр первой строки текста

Ответ 1

Я нашел решение: http://jsfiddle.net/sqp1wdap/3/

• Совместите как Eye, так и Text с текстом 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)
}

И вот как это выглядит:

Ответ 2

Я нашел решение, не изменяя свойство 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
}

И это будет выглядеть это.

Ответ 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

Ответ 4

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

Это должно быть все, что вам нужно. Демо.

Ответ 5

Надеюсь, это сработает. Я просто removed some code из вашего jsfiddle в Q, теперь получаю желаемый результат.

jsfiddle

Ответ 6

Конечно, если высота иконки равна высоте строки, она будет "выровнена" по первой строке.

Обычно эти две вещи будут разными. Вы не можете изменить высоту линии или высоту иконки, не влияя на визуальный дизайн.

Таким образом, решение для этого будет заключаться в том, чтобы обернуть значок в гибкий контейнер, высота которого равна высоте строки текста. Этот контейнер будет выполнять вертикальное центрирование значка. Если значок больше контейнера, он просто переполнится сверху и снизу.

Итак, в вашем примере (я просто преувеличиваю высоту для ясности, вы также можете попробовать с очень маленькими значениями, такими как 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/

Ответ 7

(июль 2017 г.) Хотя решение (и другие ответы) делает трюк, все они пропустили самый простой и простой в использовании ответ.

Сначала добавьте * { outline: 1px dashed } к своему оригинальному, немодифицированному скрипту, и вы почти можете увидеть решение, которое смотрит вам в лицо, поскольку элемент .LegendItem_Eye принимает op на всю высоту родительского контейнера.

Поскольку 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
• parent .LegendItem имеет правило align-items: stretch
• parent .LegendItem имеет правило justify-content: flex-start
• дочерний align-self имеет приоритет над родительским align-items
• дочерний .LegendItem_Eye не имеет значения высоты.
• child .LegendItem_Eye имеет правило align-items: center
• глаз -icon - дочерний дочерний .LegendItem_Eye
• eye -icon - символ шрифта, как и любой другой символ в алфавите, поэтому он занимает только заданное пространство $fontSize и принимает настройки шрифта fa fa-eye

, что приводит к

9. child .LegendItem_Eye растет до высоты родителя из-за 1, 2, 4 и 5
10. глаз -концентрирован в .LegendItem_Eye из-за 6, 7 и 9

Решение

11. ограничение высоты дочернего элемента .LegendItem_Eye со значением $slotWidth

    • исправление 5
    • ограничение роста 9
    • и отмена визуального эффекта 10

12. из-за 3 дочерних элементов .LegendItem_Eye глаз -icon будет двигаться вверх

Все правила с 1 по 8 (кроме правила 5) все еще действуют, только в коробке $slotWidth