Question

我有一个高度未知的div，尽管在这个例子中我使用的是3px。我想将按钮居中，但似乎总是偏移一些任意数量。一旦我知道了高度，我就可以动态地做一个绝对的定位技巧，但如果可能的话我会更喜欢css解决方案。

<div style="width: 100%; height: 3px;">      
  <div class="special">                               
    <input type="button" />                     
  </div>
</div>

div{                
  height: 100%; 
  overflow: visible;
}

.special{   
  position:relative;
  text-align: center;   
  padding: 1px;
  border: 1px solid red;
}

input{  
  height: 100%; 
  width: 100px;
  min-height: 8px;
}

这个想法是，使用最小高度，按钮将均匀地溢出div的顶部和底部。

jsfiddle

Answer 1

您可以通过执行以下操作来实现此目的：

CSS：

div {
    height: 100%;
    overflow: visible;
}
.special {
    text-align: center;
    border: 1px solid red;
    position:relative;
}
input {
    position:absolute;
    margin-top:-4px;
    margin-bottom:-4px;
    top:0px;
    bottom:0px;
    width:100px;
    min-height:7px;
}

特别注意input声明。我使用height:100%和position:absolute而不是top:0px而不是bottom:0px。这会将高度设置为100％。它必须是绝对位置，以便您可以margin-top:-4px和margin-bottom:-4px来获得重叠。您可以看到它适用于外部<div/>的任何高度。

下面的JSFiddle有一些添加的控件，因此您无需刷新即可更改.special <div/>的高度。

http://jsfiddle.net/bmyAW/8/

将一个按钮放在一个小div中

1 个答案: