Making a button fixed on a changing DIV
Question
有什么办法可以将按钮分配到DIV的中心。我能够使用padding-top：2px和padding-bottom：2px或使用margin-top和margin-bottom使其与其他策略配合使用。但是问题来了，基本上是移动的DIV，即如果用户具有更多信息，它可能会有所不同。例如，用户在输入文本字段中仅输入工作号码，它将仅显示唯一的工作电话号码。如果用户输入工作，住所和其他号码，则需要显示所有输入的信息，这将改变DIV的大小。发生的情况是div的大小会增加，并且按钮仍停留在div的顶部。即使在DIV大小变化后，也没有任何方法可以将按钮固定在中间。可以在CSS中实现，还是需要使用javascript使其起作用。
2 answers
solution1
0 2012-03-08 05:11:19
I think it can be done with pure css, is this what you are looking for?
<html>
<head>
<style type="text/css">
.wrapper {
position: relative;
width: 300px;
height: 200px;
background: #eeeeee;
}
.button {
position: absolute;
top: 41%;
left: 33%;
}
</style>
</head>
<body>
<div class="wrapper">
<input class="button" type="button" value="Button" />
</div>
</body>
</html>
solution2
0 ACCPTED 2012-03-08 05:36:48
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.