html - 元素和侧面之间的中心 DIV？

Question

我有一个很大的 div，它在我的计算机上居中。它不居中的任何其他计算机。我说的是“midwrap”，它是我拥有的大黑盒子。我希望它位于侧链和 wrapper 一侧的中间，这是它所在的灰色框。

designatease.com

提前致谢。

HTML

<div id="wrapper">
<div id="midwrap"></div>
<a class="Resources">Resources</a>
<ul id="sidelinksleft">
<li><a href="quickstart.html">Quick Start</a></li>
<li><a href="tagsmain.html">Tag Helper</a></li>
<li><a href="news.html">News</a></li>
<li><a href="learn.html">Learn</a></li>
<li><a href="sites.html">Useful Sites</a></li>
</ul>
</div>
</body>

CSS

#wrapper{
position:relative;
top:-82px;
margin-right:4%;
margin-left:4%;
width:92%;
height:100%;
background:#fafafa;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
overflow:hidden;
}

#sidelinksleft {
    margin-left:auto;
    margin-right:auto;
    float:left;
    height:25px;
    position:relative;
    /*removed clear from here*/
    float:left;
    margin-left:-25px;
    top:16px;
}

#sidelinksleft li{
position:relative;
padding-top:3px;
list-style-type: none;
}

#sidelinksleft li a{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#82CFFD;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;

}

#sidelinksleft li a:hover{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#B0E2FF;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;

}

#sidelinksleft li a:active{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#82CFFD;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;

}

.Resources{
color:#000000;;
font-size:16px;
font-family: sans-serif;
position:relative;
margin-left:-156px;
top:10px;
}

#midwrap {
    width:74%;
    height:95%;
    border-left: 1px solid black;
    border-right: 1px solid black;
    background:black;
    top:2%;
    position:relative;
    float:right; /*float right*/
    margin-right:5.5%;
}

Answer 1

也许您应该在设置样式之前重做一个简单的模板。

为他们的行为使用 CSS 规则可能会有所帮助:

1. width 和 min-width 和 max-width。
2. float 和相邻元素的布局
3. text-align 和 display:inline-block 导致它看到 float 元素和 overflow:hidden; 在那里不可用。<

margin top 不应在 % 中使用，因为它反射(reflect)了父级宽度的 %，而不是高度 嘿!这是一个意外的行为不是吗？ (如果 parent 在 CSS 中有宽度，垂直填充百分比也是如此)

我们可以得到这样的结果:http://codepen.io/anon/pen/AHhpG

html,body {
  height:100%;
  margin:0;
  text-align:center;
}
div, nav ,a {
  border:1px solid;
}
#main {
  width:90%;
  margin:1% auto 0;
  height:90%;
  min-width:800px;
}
nav {
  float:left;
  margin:1em;
  max-width:20%;  
  width:200px;
}
nav a {
  display:block;
}
#box {
     display:inline-block;
  width:70%;
  height:90%;
  margin:1em 1em 0;
}