Icon and menu with vertical alignment of the semantic interface

Question

I'm currently trying to align icon and text in Menu.Item using Semantic UI React V.0.68.2.

Currently, my HTML output is as follows:

<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 close to the original Icon class from the Responsive implementation of the semantic interface.

 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 icon to be vertically centered, but I can't get it to work, they always seem to be the vertices of their parent node. But actually I want it to be displayed vertically centered in the Menu.Item element. with any icon size. So when I resize the icon to large, the text should always be centered vertically. The size classes are the same as in the semantic interface.

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

Answer 1

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

What I suggest you do is wrap the text in the gap, and instead:

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

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 do this, you can easily use the solution in the encoder above.