如何在css中对齐图像和文本?

时间:2016-11-04 05:40:32

标签: html css

我想相应地对齐图像和文字。

我正在使用以下代码。请告诉我该怎么做。

<ul>
  <li>
    <a href=""><i class="icon-profile"></i> </a>
  </li>
  <li>
    <a href=""><i class="icon-wallet"></i> Wallet</a>
  </li>
  <li>
    <a href=""><i class="icon-home"></i> Home</a>
  </li>
  <li>
    <a href=""><i class="icon-signout"></i> Sign Out</a>
  </li>
</ul>

enter image description here

4 个答案:

答案 0 :(得分:0)

答案 1 :(得分:0)

你是这样的:

在此代码中,我正在使用font awesome 可以使用更多图标库

1。https://material.io/icons/

2。http://www.w3schools.com/icons/

&#13;
&#13;
ul{list-style:none;}
a{text-decoration: none;}
ul a i{
padding-left:10px;
  margin:0 20px auto;
  text-indent:2px;
  
  }
&#13;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

<ul>
            <li>
                <a href=""><i class="fa fa-user icon-profile"></i> profile</a>
            </li>
            <li>
                <a href=""><i class=" fa fa-file icon-wallet"></i> Wallet</a>
            </li>
            <li>
                <a href=""><i class=" fa fa-home icon-home"></i> Home</a>
            </li>
            <li>
                <a href=""><i class="fa fa-file icon-signout"></i> Sign Out</a>
            </li>
</ul>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

为图标设置固定宽度,然后为其设置margin-right,设置text-align: center以使图标居中对齐。

&#13;
&#13;
ul { margin: 0; padding: 0; list-style: none; }
a { text-decoration: none; }
i.fa {
  width: 20px;
  margin-right: 10px;
  text-align: center;
}
&#13;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

<ul>
  <li>
    <a href=""><i class="fa fa-user icon-profile"></i> Profile</a>
  </li>
  <li>
    <a href=""><i class="fa fa-file icon-wallet"></i> Wallet</a>
  </li>
  <li>
    <a href=""><i class="fa fa-home icon-home"></i> Home</a>
  </li>
  <li>
    <a href=""><i class="fa fa-file icon-signout"></i> Sign Out</a>
  </li>
</ul>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

CSS vertical-align属性解决了它。

a {vertical-align:middle; }