CODEWITHSUNDEEP
htmlcsslayout
La3eb
La3eb

Reputation: 27

how to position a form centered within a div

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

Upvotes: 0

Views: 73

Answers (7)

madalinivascu
madalinivascu

Reputation: 32354

A different way is to use negative margin (not good for ie <8)

img {
        margin-bottom:-15px;
        display:inline;

    }

Upvotes: 0

Ram kumar
Ram kumar

Reputation: 3162

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>

Upvotes: 0

wrick17
wrick17

Reputation: 701

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

Upvotes: 1

Lafontein
Lafontein

Reputation: 240

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>

Upvotes: 0

G.L.P
G.L.P

Reputation: 7207

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;
}

Upvotes: 1

pavel
pavel

Reputation: 27082

You need to set vertical-align to img:

img {vertical-align: middle}

http://jsfiddle.net/djhL2z27/4/

Upvotes: 1

Sumeet Gavhale
Sumeet Gavhale

Reputation: 800

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>

Upvotes: 0

Related Questions