1

この例では 3px を使用していますが、高さが不明な div があります。ボタンを中央に配置したいのですが、常に任意の量だけオフセットしているようです。高さがわかれば動的に絶対配置のトリックを実行できますが、可能であれば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;
}

アイデアは、min-height を使用すると、ボタンが 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:0pxにbottom:0px. これにより、高さが 100% に設定されます。オーバーラップを取得するには、絶対的な位置にする必要がありますmargin-top:-4px。margin-bottom:-4px外側のどの高さでも機能することがわかります<div/>。

以下の JSFiddle にはいくつかのコントロールが追加されているため、<div/>更新しなくても .special の高さを変更できます。

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

于 2013-03-02T23:35:27.767 に答える