bootstrap - Buttons not aligning properly

Question

I have a ul with the classes of "nav nav-tabs nav-stacked" this has a li and a "<a>" inside it and inside the "<a>" there are two button with the classes of "pull-right btn btn-primary". What's happening is that the button are sticking to the bottom of the list item I want them to be in the middle of list item.

For more clearance here is the:

HTML Code:

<div class="container-fluid">
    <div class="row-fluid">
        <ul class="nav nav-tabs nav-stacked" style="margin-top: 60px;">
            <?php
            $all_connections = get_user_connection_requests($_SESSION["uid"]);
            while($connection = mysql_fetch_assoc($all_connections)) {
                echo "<li><a>{$connection["fName"]} {$connection['lName']}"
            ?>
            <button class="pull-right btn btn-primary ">Accept</button>
            <button class="pull-right btn btn-danger ">Deny</button>
            <?php echo "</a></li>"; }   ?>
        </ul>
    </div>
    <!--/row-->
</div>

The Output:

Full Size Image Here!

I want the buttons to be also in the middle like the text.

How can I do this?

Any help would be greatly appreciated! :)

Answer 1

Try this:

<style>
    .button-group{margin-top:-5px}
</style>
<div class="container-fluid">
    <div class="row-fluid">
        <ul class="nav nav-tabs nav-stacked" style="margin-top: 60px;">

            <li>
                <a>
                    Mohammad Danish
                    <div class="pull-right button-group">
                        <button class="btn btn-primary ">Accept</button>
                        <button class="btn btn-danger ">Deny</button>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <!--/row-->
</div>

Answer 2

I've made some changes on your code, because floating elements can make some trouble.

First I've added id #something to ul list just to fix floating issue. And then I've added <span class="centered"> to wrap text inside your anchor tag.

Here is CSS

#something li a {
    overflow: hidden;
}

.centered {
    display: inline-block;
    margin-top: 5px;
}

And here is edited HTML

<div class="container-fluid">
    <div class="row-fluid">
        <ul id="something" class="nav nav-tabs nav-stacked" style="margin-top: 60px;">
            <li>
               <a href="">
                  <span class="centered">sssss</span>
                  <button class="pull-right btn btn-primary ">Accept</button>
                  <button class="pull-right btn btn-danger ">Deny</button>
               </a>
            </li>
        </ul>
    </div>
    <!--/row-->
</div>

DEMO