Question

有没有办法将按钮对齐到DIV的中心。我能够使用填充顶部使用不同的策略：2px和padding-bottom：2px或使用margin-top和margin -bottom.But这里出现了问题，基本上它是一个移动的DIV，即如果用户有更多的信息，它可能会有所不同。例如，用户只输入输入文本字段中的工作号码，它将只显示唯一的工作电话但是，如果用户输入工作，家庭和附加号码，则需要显示输入的所有信息，这将改变DIV的大小。发生的是div将增加大小并且按钮仍然保持在顶部div.Is有任何方法使按钮固定在中心，即使DIV大小不同。可以用CSS实现，或者我们需要使用javascript来使它工作。

Answer 1

我认为可以用纯CSS来完成，这就是你要找的吗？

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

Answer 2

垂直对齐总是很棘手。

然而，使用CSS移动居中按钮的demo在哪里，并使用jQuery移动。

当它移动时，按钮保持在中心，因为尚未定位。

#outer {
    text-align: center;
    width: 200px;  
    background: #ddd;
    height: 200px;
    position: static;
    display: table;
}
#inner {
    line-height: 200px;
    display: table-cell;
    vetical-align: middle;   
}

使一个按钮固定在一个不断变化的DIV上

2 个答案: