如何在css中对齐图像和文本?(How to align images and text in 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>
I would like to align images and text accordingly.
I'm using the following code. Please show me how to do that.
<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>最满意答案
为图标设置一个固定的宽度,然后给它一个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>Set a fixed width for the icons then give it a margin-right, set text-align: center to make the icons center aligned.
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>
更多推荐
<li>,<a,li>,href,电脑培训,计算机培训,IT培训"/> <meta name="
发布评论