Question

I have an <a> tag (which is part of multiple <li> tags). In the <a> tag I have an  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

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.

The fiddle is here: https://jsfiddle.net/6mg4vt77/5/

中的元素

编辑：感谢您的回答，但遗憾的是我忘了提及我必须支持IE9。

Answer 1

试试这个

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

Answer 2

快速回答，将图标设置为100％宽，并将所有内容置于锚点中。

a{
  text-align: center;
}

a .fa {
  width: 100%;
}

JSfiddle Demo

现代方法

Flexbox的：

＆＃13;

a {
  border: 1px solid grey;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<a href="/items/bluetooth">
  <i class="fa fa-bluetooth"></i> BLUETOOTH
</a>

＆＃13;

Answer 3

在你的测试用例中，我将在锚点中使用两个嵌套，一个用于图标，第二个用于文本。然后我会给他们display:block。这样一个人应该把自己定位在另一个之上。最后，您可以将标记嵌套在第一个中，如下所示：

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

现场演示：https://jsfiddle.net/6mg4vt77/10/

Answer 4

将代码包装在div中：

<div class="link" style="width:90px;text-align:center;">
<a href="/items/bluetooth" style="display: inline-block;">
<i class="fa fa-bluetooth" style="text-align:center;"></i><br> BLUETOOTH
</a>
<ul class="dropdown-menu ddcolumns">
<li><a href="#">Main3</a></li>
</ul>
<div class="clearfix"></div>
</div>

那应该解决你的问题。

PS：你总是可以根据自己的喜好改变div中的宽度，即使是％： - ）。

Answer 5

要回答标题为“＃34”的问题，请将＆lt; a＆gt;内的元素对齐。垂直标记＆＃34;，这个https://jsfiddle.net/cdLp61ad/1/就是我用来：

垂直中间对齐链接文字
和水平
控制可点击区域（全高和宽）

（不要被看似粗俗的东西所迷惑，它不是桌子！）

def create
    user = User.find(params[:user][:user_id])
    current_user.follow(user)
    redirect_to followuser_url
 end

HTML嵌套是通常的＆＃39;方式：

ul {
  display: table;
  table-layout: fixed;    /* all cells same width */
  margin: 0 auto;         /* Optional */
}

a {
  display: block;     /* Makes line-height work */
  line-height: 4em;   /* Control HEIGHT of clickable area here */
  padding: 0 16px;    /* Control WIDTH of clickable area here */
}

li {
  display: table-cell;
  text-align: center;
  background: bisque;         /*just for visualisation*/
  border: 1px dashed orange;  /*just for visualisation*/
}

linktext中的多行留下了空白，对不起

我还在努力......

负利润似乎没有帮助
该技术使用显示：严重影响因此可能会导致意外行为＆＃39;
我可能会尝试下一次相对定位，但我确实上次放弃了，我所有的横向菜单都是在线的！

另见：

老技术：在phrogz.net
新技术：sitepoint.com上的有希望的信息Giving Floasts the Flick和Migrating to Flexbox
你可以wrap A-tags round block elements in HTML5

Answer 6

将您要显示的文字放入另一个HTML元素，例如。要使图标居中，请将其包装到元素中，并使用text-align设置样式。

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

对齐<a> tag vertically

6 个答案:

linktext中的多行留下了空白，对不起

另见：