CODEWITHSUNDEEP
jqueryhtmlcssjquery-uivertical-alignment
A.O.
A.O.

Reputation: 3763

Horizontally Align Text w/ Ellipsis with jQuery button

I am trying to horizontally align some text (w/ ellipsis) with a jquery button and can't figure out whats going on.

Here is a jsfiddle displaying my problem:

http://jsfiddle.net/5bVDu/

<span>
    <span id='heading'>Long Heading That Requires Ellipsis</span>
    <span id='hiddenID'>ID</span>
    <button id='closeTab'></button>
</span>

As you can see, the button appears to be a little offset (lower) from the text, how can I get them to appear horizontally aligned?

I've tried messing with padding, margin, vertical-align with no success, would really appreciate some help from any of you css gurus out there! thanks!

Upvotes: 0

Views: 170

Answers (1)

j08691
j08691

Reputation: 207901

Add vertical-align:top to #closeTab:

#closeTab {
    height: 16px;
    width: 16px;
    margin-left:5px;
    vertical-align:top;
}

jsFiddle example

Upvotes: 1

Related Questions