css - 在每个 li 文本顶部插入图像 [重复]答案

【问题标题】：css - Insert image on top of each li text [duplicate]css - 在每个 li 文本顶部插入图像 [重复]
【发布时间】：2017-06-26 14:00:04
【问题描述】：

在每个列表元素的顶部插入小图像的最佳方法是什么？像这样：

感谢您的帮助！

我试过了，但它看起来不像图像！

.top-menu-ul {
    float: right;
    list-style: none;
    text-decoration: none;
    font-size: 12px;
    color: #fff;
}

.top-menu-ul li {
    float: right;
    margin: 50px 20px;
}

<ul class="top-menu-ul">
  <li><img align="center" src="imgz/icon.png" alt=""><a href="">TEXT</a></li>
  <li><img align="center" src="imgz/icon.png" alt=""><a href="">TEXT</a></li>
  <li><img align="center" src="imgz/icon.png" alt=""><a href="">TEXT</a></li>
</ul>

【问题讨论】：

我认为最好的方法是编码。
希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
让每个元素成为一个 div 容器有什么问题，该容器有两个元素（可以是子 div），每个元素分别包含一个 img 和一个 text 元素？你有没有尝试过什么？如果是这样，请分享您的代码，以便我们有更好的想法和帮助。

标签： html css image list

【解决方案1】：

元素之间有一个简单的<br/>，并且一些居中应该可以做到：

.top-menu-ul {
  list-style: none;
  text-decoration: none;
  font-size: 12px;
  color: #fff;
}

.top-menu-ul li {
  border-right: 1px solid #dddddd;
  float: left;
  margin-right: 10px;
  padding: 10px;
  text-align:center;
}

.top-menu-ul > :first-child
{
  border-left:solid 1px #dddddd;
}

.top-menu-ul li img {
  margin-bottom: 5px;
}

<ul class="top-menu-ul">
  <li><img align="center" src="imgz/icon.png" alt=""><br/><a href="">TEXT</a></li>
  <li><img align="center" src="imgz/icon.png" alt=""><br/><a href="">TEXT</a></li>
  <li><img align="center" src="imgz/icon.png" alt=""><br/><a href="">TEXT</a></li>
</ul>

【讨论】：

这真的不是proper way to use <br>，我们不应该告诉人们那样使用它