CODEWITHSUNDEEP
csstwitter-bootstrap
Littlebobbydroptables
Littlebobbydroptables

Reputation: 3731

Twitter bootstrap, icon pull left vertical align

I ve tried to align an icon in dropdown link with 'pull-left' class, and now its not vertically align to center, the main problem is what i dont want to use pure css to fix this, because i am sure there is a solution with bootstrap built in class'es, but can't find them by myself. Am i right?

    <div class="navbar">
        <div class="navbar-inner">
            <a class="brand" href="#">Dbgr.lt</a>
            <ul class="nav">
                <li class="active"><a href="#">Posts</a></li>
                <li><a href="#">Blogs</a></li>
                <li><a href="#">Questions</a></li>
                <li><a href="#">People</a></li>
            </ul>

            <ul class="nav pull-right">
                <li class="dropdown" id="fat-menu">
                    <a data-toggle="dropdown" class="dropdown-toggle text-center" role="button" id="drop3" href="#" style="min-width: 100px;"> 
                        <i class="icon-user pull-left"></i>
                        Admin
                        <b class="caret"></b>
                    </a>
                    <ul aria-labelledby="drop3" role="menu" class="dropdown-menu">
                        <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Action</a></li>
                        <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Another action</a></li>
                        <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Something else here</a></li>
                        <li class="divider" role="presentation"></li>
                        <li role="presentation"><a href="#" tabindex="-1" role="menuitem">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

Fiddle: http://jsfiddle.net/HX6ef/

Upvotes: 4

Views: 3713

Answers (1)

Idrizi.A
Idrizi.A

Reputation: 12010

Try something like this

.pull-left{
    margin-top: 3px;
}

jsFiddle: http://jsfiddle.net/enve/HX6ef/1/

Upvotes: 1

Related Questions