语义菜单 - 需要放置一个居中的标题

Question

我需要让我的应用标题集中在应用语义菜单中。

以下是我目前的代码：

HTML：

<div class="ui red inverted borderless top attached menu">
  <div class="ui red dropdown icon launch button">
   <i class="sidebar icon"></i>
  </div>
  <a class="item mytitle ">My App Title</a>
  <div class="ui right aligned category search item">
    User Name
  </div>
</div>

CSS：

.mytitle {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 35px;
    display: table-cell;
    color: #FFFFFF;
    text-decoration: none;
}

我尝试添加宽度=＆＃34; 90％＆＃34;在CSS中，虽然它能够使它居中，但它推动了用户名，我想避免使用。

还有另一种让它居中的方法吗？

这是我目前的JSFiddle

Answer 1

喜欢这个https://jsfiddle.net/DIRTY_SMITH/85fenw7t/1/

.mytitle {
    height: 35px;
    color: #FFFFFF;
    text-decoration: none;
    margin-left: calc(50% - 90px);
}