如何在css中对齐图像和文本？答案

【问题标题】：How to align images and text in css?如何在css中对齐图像和文本？
【发布时间】：2017-03-17 21:26:07
【问题描述】：

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

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

<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>

【问题讨论】：

用相关代码创建一个demo
你可以在小提琴中添加你的代码
使用调试器选项查看应用的样式。

标签： html css

【解决方案1】：

CSS vertical-align 属性解决了这个问题。

a { 垂直对齐：中间； }

【讨论】：

【解决方案2】：

为图标设置一个固定宽度，然后给它一个margin-right，设置text-align: center 使图标居中对齐。

ul { margin: 0; padding: 0; list-style: none; }
a { text-decoration: none; }
i.fa {
  width: 20px;
  margin-right: 10px;
  text-align: center;
}

<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>

【讨论】：

【解决方案3】：

你是不是这样的：

在这段代码中我使用font awesome 更多图标库可用

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

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

ul{list-style:none;}
a{text-decoration: none;}
ul a i{
padding-left:10px;
  margin:0 20px auto;
  text-indent:2px;
  
  }

<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>

【讨论】：

【解决方案4】：

如果您想制作要点图标：

Using Font Awesome icon for bullet points, with a single list item element

https://www.sitepoint.com/use-webfont-icons-bullet-points-html5-lists/

http://techforluddites.com/replacing-list-bullets-with-images-using-css/

否则，如果您正在寻找两个不同元素的特定对齐方式：

Vertically align text next to an image?

how to vertically align text next to a floated image?

希望这些链接有所帮助。祝你好运！ :)

【讨论】：