根据内容（而不是100％）固定宽度和高度的位置

我有一个容器DIV设置为“位置：固定”，其中包括另一个设置为绝对位置的div。根据内容（而不是100％）固定宽度和高度的位置

有没有什么办法可以让这个div包含宽度和高度以适合内容，而不总是100％？

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

这是我想什么：http://jsfiddle.net/3BYPu/（而不必手动设置宽度/高度）。

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

来源

2013-02-25 aur0n

aur0n，

如果可能的话，要做到这一点最好的和最简单的方法是使用JavaScript来计算元件的高度和宽度然后相应内部元件的位置。

要完成此操作，只需将包含元素的宽度除以2，然后将内部元素的left值设置为该数量减去其自身宽度的一半。然后，为高度做同样的事情。

此外，您可能错过的其中一件事是您的内部div应设置为position: relative和display: inline。您的div伸展以匹配包含元素的宽度的原因是因为position: absolute将元素从正常流程中取出，而position: relative将其保留在正常流程中。

这里是（使用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");

通过此解决方案，你不必手动设定的宽度和高度。另外，有一个内部div与多行文本不会是一个问题。

小提琴：http://jsfiddle.net/ydSqU/3/

来源

2013-02-25 16:57:29 Joey

我想没有人向你解释简单易懂 – 2017-02-13 13:25:52

@ aur0n改变这样

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

来源

2013-02-25 16:19:29 snowp

这很好，但没有居中。 – aur0n 2013-02-25 16:27:22

@ aur0n居中的div使用此#window {border：2px点缀红色; 背景：白色;顶部：50％;左：50％; 职位：固定; 保证金：0汽车;} – snowp 2013-02-25 16:51:19

你可以试试下面的CSS，

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

}

来源

2013-02-25 16:23:48

这不是绝对集中：见http://jsfiddle.net/x8rbn/ – aur0n 2013-02-25 16:31:08

试试这个：

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

来源

2013-02-25 16:28:41 LorDex

仍然不好。我不想手动设置高度（使用高度：1.2em），并且它不会将div居中放置在页面中央。 http://jsfiddle.net/3BYPu/2/ – aur0n 2013-02-25 16:37:41

根据内容（而不是100％）固定宽度和高度的位置

回答

相关问题