Posizione fissa con larghezza e altezza in base al contenuto (e non al 100%)

Question

Ho un contenitore DIV impostato su "posizione: fissa", che include un altro div impostato in posizione assoluta.

C'è un modo per rendere questo div incluso con larghezza e altezza per adattarlo al contenuto e non sempre al 100%?

Questo è quello che ho: http://jsfiddle.net/ydSqU/

<div class="transparent_background"> 
    <div id="window">hello.</div> 
</div> 

Questo è quello desidero: http://jsfiddle.net/3BYPu/ (senza dover impostare manualmente larghezza/altezza).

<div class="transparent_background"> 
    <div id="window" style="width:30px; height:30px">hello.</div>  
</div> 

Answer 1

aur0n,

Se possibile, il modo migliore e più semplice per farlo è utilizzare javascript per calcolare l'altezza e la larghezza degli elementi posizionare l'elemento interno di conseguenza.

Per ottenere ciò, è sufficiente prendere la larghezza dell'elemento contenitore e dividerlo per due, quindi impostare il valore left dell'elemento interno su tale valore meno la metà della propria larghezza. Quindi, fare lo stesso per l'altezza.

Inoltre, una delle cose che potresti aver perso è che il tuo div interno dovrebbe essere impostato su position: relative e display: inline. Il motivo per cui il div si allunga per adattarsi alla larghezza dell'elemento contenitore è perché position: absolute elimina l'elemento dal flusso normale, mentre position: relative lo lascia nel flusso normale.

Ecco il codice che ho usato (usando jQuery):

// centering the width 
$("#window").css("left", ($(".transparent_background").width()/2)-($("#window").width()/2) + "px"); 
// centering the height 
$("#window").css("top", ($(".transparent_background").height()/2)-($("#window").height()/2) + "px"); 

Con questa soluzione, non è necessario impostare manualmente la larghezza e l'altezza. Inoltre, avere un div interno con più righe di testo non sarà un problema.

violino: http://jsfiddle.net/ydSqU/3/

Answer 2

@ aur0n cambiare il css come questo

#window { 
     border:2px dotted red; 
     background:white; 
     position: absolute; 
     clear:both; 
    } 

Answer 3

Puoi provare il seguito,

#window { 
    border:2px dotted red; 
    background:white; 
    width:50%; 
    height:auto; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -25%; 
    vertical-align:center; 

} 

Answer 4

provare questo:

#window { 
border:2px dotted red; 
background:white; 
position: absolute; 
display: inline-block; 
height: 1.2em; 
line-height: 1.2em; 
top: 50%; 
margin-top: -0.6em; 
margin: auto; 

}

http://jsfiddle.net/3BYPu/1/