如何将第二个元素内联相对于父级集中？

Question

我正在尝试为移动应用程序制作布局。

如何相对于父母集中标题标签？

这是我的HTML：

  <div id="title">
    <i class="fa fa-th-large" id="menuButton"></i>
    <small class="title">PROFILE</small>
  </div>

See in jsBIN

Answer 1

尝试为标题添加保证金，如下所示：

#title{
    margin: 0 auto;
}

Answer 2

你的意思是你想把文本集中在里面吗？如果是这样，请尝试以下代码：

#title {
  text-align: center;
}

仅限个人资料：

HTML：

   <div id="title">
     <div id="icon">
       <i class="fa fa-th-large" id="menuButton"></i>
     </div>
     <div id="text">
       <small class="title">PROFILE</small>
      </div>
   </div>

CSS：

#title {
  background: #13A3B5;
  padding: 10px 5%;
  font-size: 2em;
  overflow: hidden;
}

#icon {
  float: left;
  width: 5%;
}

#text {
  float: left;
  width: 95%;
  text-align: center;
}