使父div的div中间 [英] make a div middle of parent div

问题描述

我试图在＃chat-main div中保留＃chat-inner div，以及我可以通过使用百分比值来做到这一点，但我的问题是，应该有一个百分比值不能提供的 2px 间隙（相对于宽度和高度）。为清楚理解，请参阅CSS代码中的注释。

JSbin
$ b HTML

 < div id =chat-outline> 
< div id =chat-main> 
< div id =chat-inner> 
< / div> 
< / div> 
< / div> 
  

CSS

 ＃chat-outline 
 {background-color：gray; width：30％; height：40％; 
 position：fixed; bottom：5px; right：5px; 
 padding：2px;} 
 
＃chat-main 
 {
 width：100％; 
身高：100％; 
 background-color：silver; 
 overflow：hidden; 
} 
 
＃chat-inner 
 {
 width：95％; 
身高：97％; 
 
 / *我怎样才能在这里给像素？我需要2px值* / 
保证金：2.5％2.5％2.5％2.5％; 
 
 / * margin：2px; * / 
 
 background-color：cornflowerblue; 
 
  

解决方案

a href =http://jsbin.com/ofipey/10/edit =nofollow> demo ）：

 ＃chat-outline 
 {background-color：gray; width：30％; height：40％; 
 position：fixed; bottom：5px; right：5px; 
 padding：2px;} 
 
＃chat-main 
 {
 width：100％; 
身高：100％; 
 background-color：silver; 
 overflow：hidden; 
职位：亲属; 
} 
 
＃chat-inner 
 {
 top：2px; 
 bottom：2px; 
 right：2px; 
 left：2px; 
 background-color：cornflowerblue; 
位置：绝对; 
} 
  

I am trying to keep #chat-inner div in the middle of the #chat-main div, well I can do that by using percentage values but my problem is that there should be 2px gap (with respect to both width and height) which a percentage value cant provide. For clear understanding please see the comment in CSS code.

JSbin

HTML

<div id="chat-outline">
  <div id="chat-main">
    <div id="chat-inner">
    </div>
  </div>
</div>

CSS

#chat-outline
{background-color:grey;width:30%;height:40%;
 position:fixed;bottom:5px;right:5px;
 padding:2px;}

#chat-main
{
  width:100%;
  height:100%;
  background-color:silver;
  overflow:hidden;
}

#chat-inner
{
  width:95%;
  height:97%;

  /*How can I give pixels here? I need 2px value*/
  margin:2.5% 2.5% 2.5% 2.5%;  

  /*margin:2px;*/

  background-color:cornflowerblue;
}

解决方案

Try something like this (demo):

#chat-outline
{ background-color:grey;width:30%;height:40%;
  position:fixed;bottom:5px;right:5px;
padding:2px;}

#chat-main
{
  width:100%;
  height:100%;  
  background-color:silver;
  overflow:hidden;
  position:relative;
}

#chat-inner
{  
  top:2px;
  bottom:2px;
  right:2px;
  left:2px;  
  background-color:cornflowerblue;
  position:absolute;
}

这篇关于使父div的div中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！