CODEWITHSUNDEEP
htmlcss
user1012500
user1012500

Reputation: 1637

How to align two spans together ?

I'm having problems aligning two spans together. The second span starts slightly lower than the first one which is causing a mis-alignment of the spans.

Essentially I'm trying to align .cbtnSymbol and .cbtnLabel together so that they are starting at the same height.

Here is a testcase: http://jsfiddle.net/DwGEa/

Upvotes: 0

Views: 1926

Answers (5)

Brad
Brad

Reputation: 198

I'm not sure how you will feel about this, but it looks like you already have your divs setup as a table. So what about trying something like this:

<table class="cmenu">
    <tr class="cbtn add">
        <td class="cbtnSymbol">+</td>
        <td class="cbtnLabel">Add</td>
    </tr>
    <tr class="cbtn add">
        <td class="cbtnSymbol">-</td>
        <td class="cbtnLabel">Delete</td>
    </tr>        
</table>

By doing this, you can get rid of some CSS for simplicity. (example: you won't need display:inline-block anymore)

DEMO http://jsfiddle.net/DwGEa/37/

Upvotes: 0

Swarne27
Swarne27

Reputation: 5747

Add the last four CSS properties additionally to your label tag CSS

.cbtnLabel {
     padding: 0 0 0 10px;
     font-size: 8px;
     height: 30px;
     display: inline-block;
     display: -moz-inline-stack;
     vertical-align:top;
     zoom: 1;
     *display: inline;
}​

Upvotes: 0

Nikola Bogdanović
Nikola Bogdanović

Reputation: 3213

Here you go: http://jsfiddle.net/DwGEa/19/

Just add line-height: 30px; vertical-align:middle; to .cbtnLabel

Upvotes: 0

Jeremy Goodell
Jeremy Goodell

Reputation: 18962

Adding line-height and vertical-align seems to help, but I'm not 100% sure what final result you are after.

<div class="cmenu">
        <div class="cbtn add"><span class="cbtnSymbol">+</span><span class="cbtnLabel" style="line-height: 20px; vertical-align: top;">Add</span></div>
        <div class="cbtn add"><span class="cbtnSymbol">-</span><span class="cbtnLabel" style="line-height: 20px; vertical-align: top;">Delete</span></div>
</div>

Here's the modified jsFiddle: http://jsfiddle.net/DwGEa/11/

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47667

Try to float the span-s - http://jsfiddle.net/DwGEa/4/

Upvotes: 1

Related Questions