Question

我有一个大的div，它位于我想要它在计算机上的中心位置。任何其他计算机不居中。我说的是“midwrap”，这是我拥有的大黑盒子。我希望它在侧链和包装器的侧面之间居中，这是它所在的灰色盒子。

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规则可能有所帮助：

width以及min-width和max-width。
float和相邻元素的布局
text-align和display:inline-block导致它看到浮动元素，而overflow:hidden;在那里无效。

margin top不应该在％中使用，因为它反映了父亲宽度的百分比，而不是它的高度嘿！这是一个意想不到的行为不是吗？ （如果父级在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;
}

项目和侧面之间的中心DIV？

1 个答案: