Semantic UI Vertical Align Icon and Menu

Question

I am currently trying to align a Icon and a text in a Menu.Item with Semantic UI React V.0.68.2.

Currently my HTML output looks like this:

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

And my JSX like this:

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

I wrote a new Icon component to use my own Icon Font which looks like this. I tried to stay as close to the original Icon class from the React Implementation of Semantic UI.

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;

Now I want the Text and the Icon to be vertically centered but I can't get it to work, they text always seems to be at the top of its parent node. But actually I want it to appear vertically centered in the Menu.Item. with any size of the Icon. So when I change the size of the Icon to large the text should always be centered vertically. The size classes are the same as in Semantic UI.

Does anyone have an idea how to achieve this ? Thanks in advance :)

Have you tried using line-height? Or have you considered using flexbox? — Thomas Gak-Deluen, Jan 29 '18 at 10:16

score 0 · Answer 1 · answered Mar 16 '18 at 02:04

Hi you are facing a very common problem, possible solutions are depicted in the following codepen https://codepen.io/anon/pen/XEKZwq

What I suggest you do is to wrap the text in a span so instead of:

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

you do the following

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

Once you've done this you can easily use the solution in the codepen above.

Semantic UI Vertical Align Icon and Menu

1 Answers1