CODEWITHSUNDEEP
reactjssemantic-ui-react
jim
jim

Reputation: 1116

Center Menu.Item in semantic-ui-react

I need help centering a title (Menu.Item) inside of a Menu using semantic-ui-react. Here is my current code:

render() {    
    return (
      <Menu>
        <Menu.Item>
          Editorials
        </Menu.Item>

        <Menu.Item>
          Reviews
        </Menu.Item>

        <Menu.Item position={"right"}>
          Upcoming Events
        </Menu.Item>
      </Menu>
    )
  }

So this creates a menu with two items on the left and one on the right. Is there a way I can create an item in the middle of the menu? Any help would be appreciated!

Thanks in advance.

Upvotes: 3

Views: 1705

Answers (2)

Biuregh Parseghian
Biuregh Parseghian

Reputation: 63

Here is how I fixed it. I add 2 position:"right" and the first one got centered. I hope it works.

render() {    
  return (
    <Menu>
      <Menu.Item>
        Editorials
      </Menu.Item>

      <Menu.Menu position='right'>
        <Menu.Item>
          Reviews
        </Menu.Item>
      </Menu.Menu>

      <Menu.Menu position='right'>
        <Menu.Item>
          Upcoming Events
        </Menu.Item>
     </Menu.Menu>
    </Menu>
  )
}

Upvotes: 3

jj0b
jj0b

Reputation: 1126

This works for me. Maybe try this with the position of the left item set explicitly and with the syntax I've used for setting it. (ie. don't wrap the position value in curly braces)

<Menu>
  <Menu.Item position="left">
    Editorials
  </Menu.Item>

  <Menu.Item>Reviews</Menu.Item>

  <Menu.Item position="right">
    Upcoming Events
  </Menu.Item>
</Menu>

Upvotes: 0

Related Questions