CODEWITHSUNDEEP
cssmenuvertical-alignmentsuper
user2988651
user2988651

Reputation: 5

CSS Text alignment when vertical align is super

I'm trying to develop a menu where dynamically some text must have the property vertical-align:super. It's happening that this item containing "super" text is not vertical aligned with other item.

Here the CSS code:

<style>
  #menu{width:300px;height:100px;background:#ABD4E6;}
  #menu ul{list-style:none;}
  #menu li{float:left;background:#054664;padding:20px;}
</style>

<div id="menu">
  <ul>
    <li>Home</li>
    <li>App<span style="vertical-align: super;">*</span></li>
    <li>Contacts</li>
  </ul>
 </div>

How can I solved the issue?

Many thanks in advance

Upvotes: 0

Views: 849

Answers (2)

user2988651
user2988651

Reputation: 5

I've another issues. The text in now vertically aligned but the position changed if I use span with super property or not.

Vertical alignment of this code:

<div id="menu">
  <ul>
    <li>Home</li>
    <li>App<span style="vertical-align: super;">*</span></li>
    <li>Test</li>
  </ul>

is different from that one:

<div id="menu">
  <ul>
    <li>Home</li>
    <li>App</li>
    <li>Test</li>
  </ul>

I've tried to modify the line-height using span for all li item, also setting it with different value in case of super usage or not but it doesn't work!

Upvotes: 0

matewka
matewka

Reputation: 10148

Elements with float: left behave in such way that they won't position themselves verticaly, no matter what vertical-align would you set to them. All li elements should not have float: left so they would preserve some specific line-height. Then you can position them together with the span, relatively to the line-height. One of the possibilities is to change the #menu li styles to this:

#menu li {
    display: inline-block;
    vertical-align: top;
    background:#054664;
    padding:20px;
}

You will also have to remember to change the HTML markup a bit. There must be no white-spaces between each opening and enclosing li tags, like this:

  <ul>
    <li>
        Home
    </li><li><!-- HERE: no space -->
        App<span style="vertical-align: super;">*</span>
    </li><li><!-- HERE: no space also -->
        Contacts
     </li>
  </ul>

Here's an example: http://jsfiddle.net/eLft6/

Upvotes: 1

Related Questions