1

我有一个高度未知的 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

4

1 回答 1

0

您可以通过执行以下操作来使其工作：

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:0pxand一起使用bottom:0px。这会将高度设置为 100%。它必须是绝对位置，以便您可以做到margin-top:-4px并margin-bottom:-4px获得重叠。您可以看到它适用于外部的任何高度<div/>。

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

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

于 2013-03-02T23:35:27.767 回答