菜单中的中心徽标

Question

如何为position:fixed菜单创建此中央徽标效果？代码尝试如下。有没有更好的方法通过bootstrap或其他框架来做到这一点？

#menuContainer{position:fixed; width:100%; background-color:red}
#menu img{height:4%; background-color:red; border-radius:100%; padding:5px}
#menu{margin-left:auto; margin-right:auto;}

<div id="menuContainer">
      <table id="menu">
        <tr>
        <td>left</td>
        <td><img src="http://downloadicons.net/sites/default/files/headset-icon-83935.png" ></td>
        <td>right</td>
        </tr>
      </table>
    </div>

Answer 1

我已更新您的代码，此处是指向jsfiddle

的链接

的CSS：

  #menuContainer{position:fixed; width:100%; background-color:red}
    #menu img{height:4%; background-color:red; border-radius:100%; padding:5px}
    #menu{margin-left:auto; margin-right:auto;}

    #menu .menu-logo img{
      padding:10px;
      border-radius: 50%;
      background:red;
      margin-bottom:-20px;
    }

html：

 <div id="menuContainer">
          <table id="menu">
            <tr>
            <td>left</td>
            <td class="menu-logo"><img src="http://downloadicons.net/sites/default/files/headset-icon-83935.png" ></td>
            <td>right</td>
            </tr>
          </table>
        </div>