Semantic UI 垂直对齐图标和菜单

Question

我正在尝试在Semantic UI React V.0.68.2中将图标和文本对齐到一个菜单项(Menu.Item)中。

目前，我的HTML输出如下：

<a class="active item pointer">
    <i aria-hidden="true" class="icon ti-icon ti-home large"></i>
    Dashboard
</a>

我的JSX如下：

<Menu vertical className="some classes" icon=''>
    <Menu.Item
    active={active}
    onClick={onClick}
    className="some class"
    >
        <Icon name="home" large /> Dashboard
   </Menu.Item>
</Menu>

我编写了一个新的图标组件，用于使用我自己的图标字体，如下所示。我尽力保持与React实现Semantic UI的原始Icon类尽可能接近。

import React, { Component } from "react";
import classnames from "classnames";

/**
 * @class Icon
 * @extends {Component}
 * @description Icon class for themify icons. Replacement for semantic ui Icon class
 */
class Icon extends Component {
    render() {
        var iconClass = classnames("icon ti-icon ti-" + this.props.name, {
            big: this.props.big,
            large: this.props.large,
            close: this.props.close
        });

        return (
            <i
                aria-hidden={true}
                className={this.props.close ? iconClass.replace("icon", "") : iconClass}
                onClick={this.props.onClick}
            />
        );
    }
}

export default Icon;

现在我希望文本和图标垂直居中，但我无法让它起作用，文本似乎总是在其父节点的顶部。但实际上，我希望它在菜单项中垂直居中显示，而不管图标的大小如何。因此，当我将图标的大小更改为大型时，文本应始终垂直居中。大小类与Semantic UI中的类相同。

有人知道如何实现这个吗？先谢谢了 :)

- grahan

---

你尝试过使用line-height吗？或者你考虑过使用flexbox吗？ - Thomas Gak-Deluen

Answer 1

嗨，你正在面临一个非常常见的问题，可能的解决方案在以下 codepen 中描述 https://codepen.io/anon/pen/XEKZwq:

我建议你将文本包装在一个 span 标签中，这样就不会出现以下问题：

<a class="active item pointer">
    <i aria-hidden="true" class="icon ti-icon ti-home large"></i>
    Dashboard
</a>

你需要做以下操作

<a class="active item pointer">
    <i aria-hidden="true" class="icon ti-icon ti-home large"></i>
    <span>Dashboard</span>
</a>

完成这个步骤后，你可以轻松地在上面的 CodePen 中使用这个解决方案。

- Carlos Pérez Priego