CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
pocockn
pocockn

Reputation: 2063

Vertically center navigation search bar bootstrap 3

I am attempting to vertically center a search bar in my websites navigation. I've tried adding a div around the search element and adding text-center to it. I have also tried margin: 0px auto !important;. None of which seemed to have any effect on the element.

I have created a bootsnipp

http://bootsnipp.com/snippets/E7WgX

Upvotes: 0

Views: 729

Answers (2)

Kapil
Kapil

Reputation: 1141

Try to this

.top-header {
    background-color: #D9D9D9;
}
.media-body{
    vertical-align: middle !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="row top-header">
    <div class="container">
        <div class="media">
            <div class="media-left">
                <img class="media-objects" src="https://placeholdit.imgix.net/~text?txtsize=30&txt=320%C3%97240&w=235&h=126" alt="logo image" />
            </div>
            <div class="media-body">
                <div class="input-group">
                    <input type="text" class="form-control input-lg" placeholder="Search" />
                    <span class="input-group-btn">
                        <button class="btn btn-info btn-lg" type="button">
                            <i class="glyphicon glyphicon-search"></i>
                        </button>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

preator
preator

Reputation: 1039

Vertical align is a difficult topic and the correct solution is very dependent on the used layout. If the snippet layout is what you use I would suggest adding these styles to columns. To get vertical-align: middle css working, you need to disable floating of columns and to keep them inline add display: inline-block. So apply to both columns class float-disable, then add vcenter to column containing search. Css styles looks like this:

.float-disable{
   float: none;
   display: inline-block;
}

.vcenter{
   vertical-align: middle;
}

Upvotes: 0

Related Questions