Align elements inside an <a> tag vertically

Question

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

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/

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

Answer 1

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/

Answer 2

Quick answer , set the icon to 100% wide and center everything in the anchor.

a{
  text-align: center;
}

a .fa {
  width: 100%;
}

JSfiddle Demo

Modern Method

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

In your test case I'll use two nested <span> within the anchor, one for the icon and the second for the text. Then I'll give them both display:block . That way one should position itself on top of the other. Finally you can nest the <i> tag within the first <span> , like so:

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

Live demo here: https://jsfiddle.net/6mg4vt77/10/

Answer 4

Wrap your code in a div like so:

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

That should fix your problem.

PS: You can always change the width in the div to your liking, even with % :-).

Answer 5

To answer the question as titled, "Align elements inside an <a> tag vertically", this https://jsfiddle.net/cdLp61ad/1/ is what I use to:

• middle-align linktext vertically
• and horizontally
• Keep the clickable area under control (full height and width)

(don't be fooled by tabley-looking stuff, it's not tables!)

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 nesting is done the 'usual' way:

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

Multiple-lines in linktext leaves a gap, sorry

I'm still working on this...

• Negative margin doesn't seem to help
• The technique uses display: heavily so playing further with that 'may cause unexpected behaviour'
• I'd probably try relative positioning next but I sure did give up last time, All my horizontal menus are on-liners!

See also:

• OLD tech: Alignment how-to and how-not-to at phrogz.net
• NEW tech: Promising info at sitepoint.com re Giving Floasts the Flick and Migrating to Flexbox
• You CAN wrap A-tags round block elements in HTML5

Answer 6

Put the text you want to display into another HTML element, eg <p> . To center the icon, wrap it into an element and style it with 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>