<a>垂直</a>對齊<a>標簽</a>內的元素

Question

我有一個<a>標簽（它是多個<li>標簽的一部分）。 在<a>標簽中，我有一個<i>標簽和一些文本 - 鏈接的文本。

我想要實現的是將圖標放在頂部，將文本放在它下面（然后居中）。 所以它看起來像：

   ICON
MYTEXTHERE

但是它們總是彼此相鄰。 我嘗試使用display: inline-block - 因為我的<a>是內聯的 ，內部的內容應該是塊但沒有成功。

小提琴在這里： 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演示

現代方法

Flexbox的：

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

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

Answer 3

在您的測試用例中，我將在錨點中使用兩個嵌套的<span> ，一個用於圖標，第二個用於文本。 然后我會給他們兩個display:block 。 這樣一個人應該把自己定位在另一個之上。 最后，您可以將<i>標記嵌套在第一個<span> ，如下所示：

<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

要回答題為“垂直對齊<a>標簽內的元素”的問題， 請使用以下https://jsfiddle.net/cdLp61ad/1/ ：

• 中間對齊鏈接文本垂直
• 和水平的
• 保持可點擊區域（全高和寬）

（不要被看起來像桌子的東西所迷惑，這不是桌子！）

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

HTML嵌套是以“通常”的方式完成的：

<ul>
  <li>
    <a ... >

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

我還在努力......

• 負利潤似乎沒有幫助
• 該技術使用顯示：大量進一步播放'可能導致意外行為'
• 我可能會嘗試相對定位，但我確實上次放棄了，我所有的橫向菜單都是在線！

也可以看看：

• 老技術：在phrogz.net上調整使用方法和操作方法
• 新技術：在sitepoint.com上提供有希望的信息讓我們充分享受輕彈和遷移到Flexbox
• 您可以在HTML5中包裝A-tags圓形塊元素

Answer 6

將要顯示的文本放入另一個HTML元素，例如<p> 。 要使圖標居中，請將其包裝到元素中並使用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>