how to position a form centered within a div - html

Question

Hello guys I have a small form within a div I have already centered it but the img with it can't be center properly with it its always kinda on top or in the bottom i want the h4/form/img to appear as if they are on one line here is the code:
.outer {
display:block;
width:1140px;
margin:0 auto;
}
.inner {
text-align:center;
display:block;
}
body {
background:#dee
}
form {
margin:0px;
display:inline;
margin-top:10px;
}
img {
display:inline;
}
h4 {
display:inline;
margin:0px;
margin-top:10px;
}
HTML:
<div class="outer">
<div class="inner">
<h4>Personalize your experiance:
</h4>
<form>
<input />
</form>
<img src="zip-icon.png">
</div>
</div>
http://jsfiddle.net/mohamedkna/djhL2z27/
Thanks in advance

Answer 1

You need to set vertical-align to img:
img {vertical-align: middle}
http://jsfiddle.net/djhL2z27/4/

Answer 2

Try like this: Demo
CSS:
form {
margin:0px;
display:inline-block;
line-height:40px;
vertical-align:middle;
}
img {
display:inline;
line-height:40px;
vertical-align:middle;
}

Answer 3

Add vertical-align: middle to the img and form. That should more or less do the job. The rest fine tuning u can do.

Answer 4

Try using align attribute:
<div class="outer">
<div class="inner" align="center">
<h4>Personalize your experiance:
</h4>
<form>
<input />
</form>
<img src="zip-icon.png">
</div>

Answer 5

You have problem here:
.outer {
display:block;
width:1140px;
margin:0 auto;
}
Change to this:
.outer {
text-align:center !important;
display:block;
width:100%;
margin:0 auto;
}
.outer {
text-align:center !important;
display:block;
width:100%;
margin:0 auto;
}
.inner {
text-align:center
display:block;
}
body {
background:#dee
}
form {
margin:0px;
display:inline;
margin-top:10px;
}
img {
display:inline;
}
h4 {
display:inline;
margin:0px;
margin-top:10px;
}
<div class="outer">
<div class="inner">
<h4>Personalize your experiance:
</h4>
<form>
<input />
</form>
<img src="http://i.imgur.com/O9fPYk5.png">
</div>
</div>

Answer 6

Please update css. All content will be in center as you need
function useless() {
alert(hello);
}
.outer {
display:block;
max-width:1140px;
margin:0 auto;
}
.inner {
text-align:center;
}
body {
background:#dee
}
form {
margin:0px;
display:inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
}
img {
display:inline-block;
vertical-align: middle;
}
h4 {
display:inline-block;
vertical-align: middle;
margin:0px;
}
<div class="outer">
<div class="inner">
<h4>Personalize your experiance:
</h4>
<form>
<input />
</form>
<img src="http://i.imgur.com/O9fPYk5.png">
</div>
</div>

Answer 7

A different way is to use negative margin (not good for ie <8)
img {
margin-bottom:-15px;
display:inline;
}