Pozycja stała z szerokością i wysokością na podstawie zawartości (a nie 100%).

Question

Mam DIV kontenera ustawiony na "position: fixed", który zawiera inny zestaw div ustawiony na pozycję absolute.

Czy mogę w jakiś sposób uwzględnić div z szerokością i wysokością dopasowaną do zawartości, a nie zawsze w 100%?

To jest to, co mam: http://jsfiddle.net/ydSqU/

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

To co chciałbym: http://jsfiddle.net/3BYPu/ (bez konieczności ręcznego ustawić szerokość/wysokość).

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

Answer 1

aur0n,

Jeśli to możliwe, najlepszym i najprostszym sposobem, aby to zrobić jest użycie javascript, aby obliczyć wysokość i szerokość elementów następnie umieść element wewnętrzny odpowiednio.

Aby to zrobić, wystarczy wziąć szerokość elementu zawierającego i podzielić go przez dwa, a następnie ustawić wartość elementu wewnętrznego na wartość równą minus połowie szerokości. Następnie wykonaj to samo dla wysokości.

Jedną z rzeczy, które mogłeś przegapić, jest to, że twój wewnętrzny div powinien być ustawiony na position: relative i display: inline. Powodem, dla którego element div rozciąga się w celu dopasowania szerokości elementu zawierającego, jest fakt, że position: absolute przejmuje element poza normalny przepływ, podczas gdy position: relative pozostawia go w normalnym przepływie.

Oto kod użyłem (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"); 

Dzięki takiemu rozwiązaniu nie trzeba ręcznie ustawić szerokość i wysokość. Ponadto posiadanie wewnętrznego elementu div z wieloma liniami tekstu nie będzie stanowić problemu.

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

Answer 2

@ aur0n zmienić css jak ten

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

Answer 3

można spróbować poniżej

#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

spróbuj tego:

#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/