Question

编辑：我正在尝试创建一个＆＃34;响应式菜单＆＃34; 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

Answer 2

你可以尝试这样的事情。在这里你有一个顶部的条形中心对齐和2个图标链接左对齐（50％宽度，如你发布的原始链接）：

<强> HTML：

<div class="menu top"><a href="#">Link</a></div>
<div class="menu icon"><img src="" /><a href="#">Link</a></div>
<div class="menu icon"><img src="" /><a href="#">Link</a></div>

<强> CSS：

.menu {
    display:inline-block;
    border:1px solid #333;
    background-color:#ddd;
    padding:10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-right:-4px;
}

.menu>a {
    color:#000;
    text-decoration:none;
}

.top {
    width:100%;
    text-align:center;
}

.icon {
    width:50%;
}

.icon>a {
    padding-left:10px;
}

.icon>img {
    display:inline-block;
    border:1px solid red;
    width:30px;
    height:30px;
}

这是Fiddle。希望它有所帮助。

如何在顶部栏中左对齐图标并居中对齐文字＆＃39;

2 个答案: