对齐< a>内的元素。垂直标签 [英] Align elements inside an <a> tag vertically

问题描述

我有一个< a> 标签（它是多个< li> 标签的一部分）。在< a> 标记中，我有一个< i> 标记和一些文本。

I have an <a> tag (which is part of multiple <li> tags). In the <a> tag I have an <i> tag and some text - the text of the link.

我想要实现的是将图标放在顶部，将文本放在其下（然后居中）。所以它看起来像：

What I would like to achieve is to have the icon on top and the text under it (and then centered). So it would look like:

   ICON
MYTEXTHERE

但是它们总是放在彼此的旁边。我尝试使用 display：inline-block - 因为我的< a>

However they are always placed next to each other. I tried using display: inline-block - because my <a> is inline and the content inside should be block but without success.

这里的内容是 https://jsfiddle.net/6mg4vt77/5/

编辑： em>感谢您的答案，但很遗憾，我忘了提及我必须支持IE9。

Thanks for the answers but sadly I forgot to mention that I must support IE9.

推荐答案

b
$ b

try this

<a href="/items/bluetooth" style="display: inline-block; text-align:center">
  <i class="fa fa-bluetooth"></i>
  <br>
  BLUETOOTH
</a>

https://jsfiddle.net/6mg4vt77/7/

这篇关于对齐< a>内的元素。垂直标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！