html - How do I get the caret to line up with text

Question

I have text and then a carat which drops down the text but for some reason can not get the caret to vertically align with the text despite my efforts.

Jsfiddle: http://jsfiddle.net/nCP9J/5/

HTML:

<div id ="hiddensubmit" class = "dropdown-toggle" data-toggle="dropdown" onclick="document.formSearch.submit()" style="top:55px; font-size:20px;">
<a href="#" id="drop" class ="dropdownsearch">Stuff&nbsp;<span class = "searchcaret" style="display:inline;line-height:66px;vertical-align:middle;"></span></a></div>

CSS:

.dropdown-toggle {
  *margin-bottom: -3px;
}
.searchcaret {
  display: inline-block;
  width: 0;
  height: 0;
  line-height:100px;
  padding: 10px 0px 0px 0px;
  vertical-align: middle;
  border-top: 4px solid #000000;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  content: "";
  opacity: 0.3;
  color: #5A5A5A;
  filter: alpha(opacity=30);

position:absolute; top:10px; }

Answer 1

Change this:

<a href="#" id="drop" class ="dropdownsearch">Stuff&nbsp;<span class = "searchcaret" style="display:inline;line-height:66px;vertical-align:middle;"></span></a></div>​

To this:

<a href="#" id="drop" class ="dropdownsearch">Stuff&nbsp;<span class = "searchcaret"></span></a></div>​

It was mainly the display:inline that did it.

Answer 2

In your inline CSS for the caret span, change:

<a href="#" id="drop" class ="dropdownsearch">Stuff&nbsp;<span class = "searchcaret" style="display:inline;line-height:66px;vertical-align:middle;"></span></a>

to:

<a href="#" id="drop" class ="dropdownsearch">Stuff&nbsp;<span class = "searchcaret" style="display:inline-block;line-height:66px;vertical-align:middle;"></span></a>

you need to change that for any vertical aligning. Then move the padding in the CSS to tweak it exactly how you want.