如何在引导程序中将导航栏的标题居中

Question

我的页面上有一个导航栏。我想将此导航栏的标题居中，但是当我使用<center>将其居中时，它位于导航栏的底部。我希望图标保留在左侧。

    <nav class="navbar navbar-light bg-light text-dark navbar-mycustom">
        <div class="row">
            <a class="navbar-brand">
                <img src="https://cdn3.iconfinder.com/data/icons/social-messaging-ui-color-line/254000/128-512.png" width="50" height="50" alt="Logo">
                My title center
            </a>
        </div>
    </nav>

有时，后端发送此导航栏，我希望标题也居中：

    <nav class="navbar navbar-light bg-light text-dark navbar-mycustom">
        <div class="row">
            <a class="navbar-brand">
                <img src="https://cdn3.iconfinder.com/data/icons/social-messaging-ui-color-line/254000/128-512.png" width="70" height="50" alt="Logo">
                My title center
            </a>

  <div id="messageAdministror" onclick="alert('This is a message')" style="color:red;text-align: center;width: 100%;">
  <center><b>Warning New message</b></center><b><center>Click</b></center>
  </div>
            </div>
    </nav>

这是JSFiddle上的代码：https://jsfiddle.net/5407t1bm/

Answer 1

更改：

.navbar-mycustom{
  position: absolute !important;
  top: 0;
  left:0;
}

收件人：

.navbar-mycustom{
  position: absolute !important;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

Demo