Search code examples
htmlcssinputvertical-alignment

CSS : how to center a input inside a div

I have some problem trying to center vertically a input inside a div. I tried so many hours with different positions, margins, align, etc...

Some details about the code : Website : http://goo.gl/bDjv8C Section : contact (the last one, on the bottom)

I try to center the input "your email" but when you zoom in/out on the page (or use different devices aka smartphones) the position isn't exactly the same >_<

First I had just an input and a "OK" button on the right, but both where never vertically centred (some times the "OK" was up, sometimes down...). So I tried to make a div with a black background and them inside in order to hide the gap between the two inputs, but it went worse :s

Someone have an idea ?

PS: thats not a horizontal-align issue, but a vertical one.

Solution

  • the answer is line-height in css check this fiddle http://jsfiddle.net/elviz/qvzk1eoj/1/

           .sample{
            height: 50px; 
            background-color: red;
           line-height: 50px;
            }