CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-design
WIRN
WIRN

Reputation: 947

align text in my menu

I'm building a responsive site.

I have problems with my menu. It looks like this when its big: enter image description here

and like this when the browser window is smaller:

enter image description here

how do I style it to make it look like this when its small?

enter image description here

this is my html

<ul id="lg-menu" class="nav">
<li class="active">
    <a href="/Appointment/Uncompleted">

        <i class="glyphicon glyphicon-unchecked"></i>
        <span class="menuItenText">AVerySuperLong PrettyWord</span>
    </a>
</li>
<li class="active">
    <a href="/Member">
        <i class="glyphicon glyphicon-unchecked"></i>
        <span class="menuItenText">AShort ButPrettyWord</span>
    </a>
</li>

EDIT: js:fiddle: http://jsfiddle.net/y74K4/

Upvotes: 0

Views: 45

Answers (1)

James
James

Reputation: 4580

Try if this helps you

DEMO

Use display:table-cell property to i and span elements.

CSS

.nav{
    display:table;
}

.nav > li{
    display: table-row;
    background-color:blue;
}

.nav li i{
    display:table-cell;
    vertical-align:middle;
    line-height:1.1em;
    color:#fff;
    padding-right:5px;
}
.nav li span{
    display:table-cell;
    color:#fff;
}

Upvotes: 1

Related Questions