Vertical align text in dropdown head?

[sarahdobson]

My dropdown heads include two sizes of text. The smaller text is a snippet. The text is aligned with the baseline, and I'd like for it to be aligned in the middle.

dropdownhead.PNG

I've tried a number of things:

• Applied vertical-align: middle; to various elements, including dropDownHead, dropDownHotspot, and the snippet text (tried on both p and span elements inline).
• Added a margin to the snippet. Margins don't persist when the snippet is generated in a topic.
• Put the snippet text inside a 1x1 borderless table, and aligned text vertically in the table.

I just can't get the text to budge, and I'm guessing at least part of the reason is because dropdown heads don't contain paragraph elements.
Is it possible to vertically align text in a dropdown head? If so, how?

[Psider]

I think it should be on the span tag, but it depends on the code in the output. For example, faking the look in the MadCap help works with this code:

Code: Select all

<div class="MCDropDown MCDropDown_Closed dropDown" data-mc-state="closed">
    <span class="MCDropDownHead dropDownHead dropDownHeadOnlineOnly">
        <a href="javascript:void(0);" class="MCDropDownHotSpot dropDownHotspot MCDropDownHotSpot_ MCHotSpotImage" data-vivaldi-spatnav-clickable="1">
            <img class="MCDropDown_Image_Icon" src="../../../../Skins/Default/Stylesheets/Images/transparent.gif" height="11" width="16" alt="Closed" data-mc-alt2="Open">
                Outputs Supported
        </a>
        <span class="mini">(mini text)</span>
    </span>

Code: Select all

span.mini {
    font-size:small;
    vertical-align: middle;
}

However, middle is defined as "Aligns the middle of the element with the baseline plus half the x-height of the parent.". Therefore it ignores the ascenders and descenders when calculating the "middle". So it might not be quite how your eye defines "middle". (plus font-size and line-height, etc can effect things, I think.)

faked-span.png

I'm also not sure what would happen if the mini text span was inside it's own little div - I can't remember how the snippet code comes out.

But hopefully this will give you some ideas to look at.

[sarahdobson]

Thanks, Psider - I used your span class suggestion and that did move the text up a little. You're right that it's not exactly middle of the gray background, but it's better than before. I also increased the height of the dropdown head, which created an illusion of the text being more centered than it is. Thanks for your help!