css - 如何在 'topbar' 中左对齐图标并居中对齐文本

Question

类似于http://m.huffpost.com/us顶栏

编辑:我正在尝试创建一个“响应式菜单”ICON(左对齐)和一些 TEXT 居中在顶部的栏中

我的尝试显然不起作用:

    <div style="float:left" ><a href="#" id="trigger" class="menu-trigger"><i class="fa fa-bars"></i> </a></div>
    <center>Centered Text</center>

我的菜单触发类是:

   .menu-trigger {
      position: relative;
      padding-left: 60px;
      font-size: 1.5em;
    }

如有任何帮助，我们将不胜感激!

Answer 1

这个问题有多个解决方案。这是一个最简单的标记:

HTML

<div>
    <a>Menu</a>
    <h1>HELLO</h1>
</div>

div 实际上并不是必须的。此处用于制作完整的背景色。

CSS

h1 {
    margin: 0 0 0 80px;        
    text-align: center;
}

a {
    float: right;
    width: 80px;
}

演示

Try before buy

It also works with a menu on the left