CODEWITHSUNDEEP
htmlcss
mg_dev
mg_dev

Reputation: 1403

how to align the input field vertically centered?

Here is the HTML:

<header>
    <div class="image">
        <img class="logo" src="https://www.gravatar.com/avatar/b637dcf2d1f68517a316c466585ea1a8?s=32&d=identicon&r=PG&f=1" />
    </div>
    <div class="form">
        <input type="text" class="input" name="location" id="location" />
    </div>
</header>

Here is the CSS:

.image {
    float:left;
}
img {
    width: 100px;
    height: 100px;
}
.form {
    vertical-align: middle;
}

Here is the jsfiddle link: http://jsfiddle.net/NmP69/1/

Upvotes: 0

Views: 80

Answers (2)

j3r6me
j3r6me

Reputation: 808

One of the possible way of doing it is to use position absolute and negative margin on your image:

img {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
}

See the result here: http://jsfiddle.net/WHSKL/

Upvotes: 0

Nitesh
Nitesh

Reputation: 15749

Here you go.

WORKING DEMO

The CSS Change:

.form {
    vertical-align: middle;
    display:table-cell;
}

header {
    display: table;
}

Hope this helps.

Upvotes: 2

Related Questions