Question

我是第一次创建一个帐户页面（页眉），并且我注意到某些图标不能与文本完美对齐。我知道这对高级开发人员来说是多么容易和容易，但是我只是刚开始，确实需要一些建议。

我尝试使用padding和margin作为样式元素，但是没有用。

<header>
  <div class="container">
    <div class="row">
      <div class="col-xs-6 col-md-8">
        <div class="row">
          <div class="col-sm-3">
               <img src="paylocity_logo.png" alt="logo" style="width:100%"S/></a>
          </div>
          <div class="col-sm-9 hidden-sm hidden-xs" id="project-details">
            <a class="home-link" href="" title="Edit">  <i class="material-icons"> home </i> </a>
            <div class="project">
              <a href="">User Profile</a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-6 col-md-4 text-right" id="account">
        <a href="javascript:void(0);" id="user-profile" title="Manage"> <i class="material-icons">account_circle</i> <span>Tom Markart </span></a>
        <div id="account-options">
          <ul>
            <li>
              <a href="https://codepen.io/bmico/live/ZZZBGx"><span> <i class="material-icons">account_circle</i></span>View Profile</a>
            </li>
            <li>
              <a href="javascript:void(0);"><span class="fa fa-cog"></span>Settings</a>
            </li>
            <li>
              <a href="javascript:void(0);"><span class="fa fa-bug"></span>Report a Bug </a>
            </li>
            <li>
              <a href="javascript:void(0);"><span class="fa fa-power-off"></span>Log Out</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
</header>

我想把它们弄直。

Answer 1

根据您的情况，您可以添加以下规则：

.material-icons {
  vertical-align: middle;
}

https://codepen.io/anon/pen/EBBbpd

Answer 2

使用flex：将文本<span>和包装类包装到<a>。

...
<li>
    <a class='wrapper' href="javascript:void(0);">
        <span class="fa fa-cog"></span>
        <span>Settings</span>
    </a>
</li>
...


.wrapper {
   display: flex;
   align-items: center
}

图标将与文本元素不对齐

2 个答案: