asp.net - 自動で上下の位置合わせ？

Question

私の外側の div は position:relative で、内側の div は絶対に配置されます。

内部 div の中心を垂直に配置し、top:auto と bottom:auto を使用することを考えていますが、機能していません。どのようにすればよいかアドバイスをお願いします。

        div.Container div.Right 
    {
            width:50%;
            float:right ;
            border: 01px dashed green;
            height:95px !important;    
            position:relative !important;
    }   

     div.header-search
    {    
        overflow:auto;
        display:inline;    
        border:0px dashed blue;        
        position:absolute;
        top:auto;
        bottom:auto;
        right:0px;
    }



 <div class="Right">
            <div class="header-search">
                <input type="text" class="searchbox" />
                <input type="button" class="searchbutton" value="›" />
            </div>
</div>

Answer 1

line-height:95px;次のように、外側の div と内側の div で使用できますvertical-align: middle;。

div.Right
{
    width:50%;
    float:right ;
    border: 01px dashed green;
    line-height:95px !important;   
    display: block;
}   

div.header-search
{    
    overflow:auto;
    border:0px dashed blue;       
    vertical-align: middle;
}

ここで遊ぶことができます：http://jsfiddle.net/leniel/5Mm67/

---

内側の div のコンテンツを水平方向に揃えたい場合は、次のように追加しdiv.Rightます。

text-align: center;

結果は次のとおりです。http://jsfiddle.net/leniel/5Mm67/1/

Answer 2

絶対位置の div に設定: "top:50%;"

div を少し低く表示します (最上位の絶対 div は、親の高さの 50% - 相対 div に正確に合わせる必要があります) が、これを回避する方法があります。

例：相対位置でもう1つdivを実行し、絶対divの高さの半分でそれを高く移動します（これはコードではあまり見栄えがよくありません）-jQueryのようにsthでサイズを測定できない場合は、divの高さを知る必要がありますdivを少し上に移動します。

最も簡単な方法: 50% ではなく 45% を試してみてください (ピクセルからピクセルへの設計でない場合)。

おそらく誰かがより良い解決策を持っているでしょう。

Answer 3

これはうまくいくはずです：

div.header-search
{    
    overflow:auto;
    display:inline;    
    border:0px dashed blue;        
    position:absolute;
    top:50%;
    right:0px;
}

Answer 4

あなたが求めているものを達成するための最良の方法は、スタイルを削除してをbottom:auto;に置き換えることです。その後、中央に配置しようとしている検索バーの高さ (20px など) を計算し、その高さの半分に負のマージン スタイルを追加します。20px の場合、スタイルは次のようになります。top:auto;top:50%;margin-top:-10px;

CSS は次のようになります。

 div.header-search
{    
    overflow:auto;
    display:inline;    
    border:0px dashed blue;        
    position:absolute;
    top:50%;
height:20px;
margin-top:-10px;
right:0;

}​

Answer 5

.header-search を top:50% または bottom:50% に設定してから、margin-top:-(div の高さの半分) または margin-bottom:-(div の高さの半分); を使用します。それぞれ。また、負のマージンなしで単に top:50% または bottom: 50% を使用することもあります。

例えば：

 div.header-search
    {    
        overflow:auto;
        display:inline;    
        border:0px dashed blue;        
        position:absolute;
        top:50%;
        height: 500px;
        margin-top:-250px;
        right:0px;
    }

ええ、この場合、固定の高さを設定する必要があります。

Answer 6

内側の div を margin: auto 0; に設定してみてください。