CSS center a textbox in a div

Question

I would like to have the same margin on top and bottom.

My container div looks like:

<div id="search">
    <input id="txtSearch" type="txt">
</div>

My CSS looks like:

#search{
    min-width: 25%;
}
#txtSearch{
    display: block;
    width: 80%;
    height: 60%;
    margin: 0 auto;
    }

For further information please have a look at my JSFIDDLE

http://stackoverflow.com/questions/16002325/give-same-margin-to-top-and-bottom-as-margin-of-right-and-left-in-respon — earlymorningtea, Aug 15 '14 at 11:28
possible duplicate of [What's The Best Way of Centering a Div Vertically with CSS](http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css) — , Aug 15 '14 at 11:50

James Donnelly · Answer 1 · 2014-08-15T11:36:10.400

Your #txtSearch selector doesn't have margin: 0 auto specified in the JSFiddle demo you've provided. Adding this in centralises the input element as it should:

#txtSearch {
    ...
    margin: 0 auto;
}

JSFiddle demo.

Update (from comments)

But now the input is still on top, but there should be the same space at top and bottom.

For that I'd use a table display on the header element, and a table-cell display on its children, set with a vertical-align of "middle":

#header {
    display: table;
}
#header a, #header a:link, #header a:visited, #header a:active, #header div {
    display: table-cell;
    vertical-align: middle;
}

JSFiddle demo.

Oh forgot to insert. But now the input is still on top, but there should be the same space at top and bottom. — Bene, Aug 15 '14 at 11:33

CSS center a textbox in a div

1 Answers1