Making a button fixed on a changing DIV
Question by user1046671
Is there any way to allign a button to the center of the DIV.I was able to make it work with different strategies using a padding-top:2px and padding-bottom:2px or with using a margin-top and margin-bottom.But here comes the problem,basically it is a moving DIV i.e it might differ if the user have more inforamtion in it.For example user enters only work number in the input text field it will be showing up only the only work phone number.But if the user enters work,home and additional number,it need to show all the information entered,which will vary the size of the DIV.What happens is the div will increase in size and button still stays at the top of the div.Is there any way to make the button fixed at the center even after the DIV varies in size.Can it be achieved in CSS or we need to used javascript to make it work.
Answer by Starx
Vertical align is always tricky.
However where is a demo of moving centered button with CSS and moved with jQuery.
As it moves, the button remains at center as the position has not been defined.
#outer {
text-align: center;
width: 200px;
background: #ddd;
height: 200px;
position: static;
display: table;
}
#inner {
line-height: 200px;
display: table-cell;
vetical-align: middle;
}
