posicionamento superior e inferior com auto?

Question

posicionamento superior e inferior com auto?

o meu div exterior é a posição: o div relativo e o div interior é o absoluto.

quero colocar o meu centro interno de div alinhado verticalmente e pensar em usar top: auto e bottom: auto, mas não está a funcionar. Por favor, me aconselhe como isso pode ser feito.

        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>

1

html css .net asp.net xhtml

Author: haansi, 2012-10-21

Source

7 answers

score 1 · Answer 1

Podes usar line-height:95px; no div exterior e vertical-align: middle; no div interior assim:

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

Podes brincar com isso aqui. http://jsfiddle.net/leniel/5Mm67/

Se quiser alinhar horizontalmente o conteúdo do div interior, basta adicionar isto em div.Right:

text-align: center;

Eis o resultado: http://jsfiddle.net/leniel/5Mm67/1/

score 0 · Answer 2

A melhor maneira de conseguir o que procura seria remover o estilo bottom:auto; e substituir o top:auto; por top:50%; . Depois disso trabalhar para fora a altura da barra de pesquisa que você está tentando centrar (digamos seu 20px) e adicionar um estilo de margem negativo para a metade de sua altura, então se fosse 20px o estilo seria margin-top:-10px;

O teu css seria assim:

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

}

score 0 · Answer 3

Pronto .header-search to top: 50% or bottom: 50% then use margin-top: - (half of div height) or margin-bottom:-(half of div height); respectively. Eu também às vezes simplesmente usar top:50% ou inferior: 50% sem as margens negativas.

Por exemplo:

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

Então, sim, neste caso teria de definir uma altura fixa.

score 0 · Answer 4

Colocado no div com a posição absoluta: "top:50%;"

Ele irá mostrar o div um pouco a baixo (top o div absoluto deve ser exatamente sobre os 50% da altura do pai - div relativo), mas existem maneiras de contornar isso.

Por exemplo: Faça ainda mais um div com posição relativa e mova-o mais alto com metade da altura absoluta do div (isto não parece muito bom em código) - você deve saber a altura divs, se você não pode medir o tamanho em sth como jQuery e mover um pouco mais alto.

Maneira mais fácil: talvez tentar 45% em vez de 50% (se não for o design do pixel para pixel).

Provavelmente alguém tem melhores soluções, se assim for, eu gostaria de vê-las a :)

score 0 · Answer 5

Isto deve funcionar.

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

score 0 · Answer 6

Hie, há vários métodos para centralizar verticalmente O div através da magia do CSS.... Aqui estão os exemplos e funciona bem eu testei... e funciona bem.

HTML:

<div id="parent">
    <div id="child">Content here</div>
</div>

CSS:

#parent {position: relative;}

#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

Aqui estão outros métodos Clique aqui para ver a referência completa Hope, vai ajudar-te. Aplauso. !!

score -1 · Answer 7

Tente ajustar o div interior à margem: auto 0;

-1

Author: Jami Stewart, 2012-10-20 21:25:40