how to verticaly center abutton in a div

[otuatail]

	<div style="height:40px;width:300px;margin-top:15px;clear:both;border:solid;">
    <input type="submit" value=" Update Teams ">
    </div>

Hi I have tried margins and borders both top and bottom

 

I just want the submit button vertically centred.

 

This is part of  another div hence the clear:both;

 

TA

 

Driving me mental...

Edited July 11, 2015 by otuatail

[scootstah]

A margin on the input works fine: https://jsfiddle.net/hm7hwgun/

[maxxd]

Try this in your CSS:

#my-button{
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

Obviously change the #my-button identifier to whatever ID you're using for the button, and make sure the surrounding container has a position: value of either 'absolute' or 'relative'.

[fastsol]

I simply added the display and vertical-align attr to your code and tested fine in firefox.

<div style="height:40px;width:300px;margin-top:15px;clear:both;border:solid;display: table-cell;vertical-align: middle">
        <input type="button" value=" Update Teams " style="">
    </div>

[denno020]

If you want to use flexbox:

div {
    display: flex;
    align-items: center;
}

More info on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Edited July 13, 2015 by denno020