如何在无序列表项上方对齐图像

Question

我有一个无序的列表项元素，其中包含一些列表项和链接。在每个链接上方，我想展示一个图像。我希望文本在相关图像下方水平对齐。

<ul>
  <li><a href="#" class="link">Accounts</a></li>
  <li><a href="#" class="link">Search</a></li>
  <li><a href="#" class="link">Bag</a></li>
</ul>

这是我的CSS

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  display: inline-block;
}

li a:before {
  display: block;
  width: 50px;
  height: 50px;
  background: url('http://placehold.it/50x50') no-repeat center;
  content: '';
  margin-bottom: 5px;
}

Answer 1

只需将text-align:center添加到li以及auto的左/右边距，然后您可以更进一步为width设置li ul { margin: 0; padding: 0; list-style-type: none; } li { width:75px; display: inline-block; text-align:center; } li a { display:block; } li a:before { display: block; width: 50px; height: 50px; background: url('http://placehold.it/50x50') no-repeat center; content: ''; margin:0 auto 5px; }，以便无论文本的长度如何，它们都具有相同的宽度。

＆＃13;

＆＃13;

<ul>
  <li><a href="#" class="link">Accounts</a></li>
  <li><a href="#" class="link">Search</a></li>
  <li><a href="#" class="link">Bag</a></li>
</ul>

＆＃13;

# python script:
import re
text='<a class=""email"" href=""mailto:SOisAwesome@hello.edu"">'
regex='(?:<a class=""email"" href=""mailto:)(.+?@hello\.edu)(?:"">)'
match=re.search(regex,text)
print(match.group(1))
# result is 'SOisAwesome@hello.edu'

// Google app script
function myFunction() {
  string='<a class=""email"" href=""mailto:SOisAwesome@hello.edu"">'
  regex=new RegExp('(?:<a class=""email"" href=""mailto:)(.+?@hello\.edu)(?:"">)')
  Match=regex.exec(string)
  Logger.log(Match[1])
  // result is 'a class=""email"" href=""mailto:SOisAwesome@hello.edu'
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用flexbox的替代解决方案。

您可以将a元素设置为flex容器，并将内容水平居中。

＆＃13;

＆＃13;

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  display: inline-block;
}

a {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4em;
}

li a:before {
  display: block;
  width: 50px;
  height: 50px;
  background: url('http://placehold.it/50x50') no-repeat center;
  content: '';
  margin-bottom: 5px;
}

＆＃13;

<ul>
  <li><a href="#" class="link">Accounts</a></li>
  <li><a href="#" class="link">Search</a></li>
  <li><a href="#" class="link">Bag</a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;