0

假设我有一个要水平居中的 div，并设置在距窗口顶部或底部固定距离处。我想将其宽度设置为 75%，并将其高度设置为根据动态内容而变化。页面永远不会有超出视口的内容，因此它永远不会滚动。我怎样才能用 CSS 做到这一点？HTML在这里，基本上：

<body>
  <div id="main">
    <div id="div_in_question">
      Omg stuff goes here it will probably change though via jQuery.
    </div>
  </div>
</body>
4

3 回答 3

2

你可以像这个Demo那样做

HTML

<div class="container"></div>

CSS

.container {
    height: 300px;
    width: 75%;
    position: absolute;
    background-color: #ff0000;
    margin-left: -37%;
    left: 50%;
}

解释：给position: absolute;你和让它水平居中的真正诀窍是div给margin-left它，这将是你总宽度的一半，div并让它水平居中left50%

于 2012-10-30T06:02:51.247 回答
1

您可以像这样划分页面宽度：

margin-left:14.5%;
margin-right14.5%;
width:75%;
于 2012-10-30T06:03:58.157 回答
1

无论div中的内容量如何，您是否保持与顶部或底部的距离固定？

如果是这样，你可以尝试这样的事情：

<div id='outer'>
     <div id='inner'>                    
         SOme text hereSOme text hereSOme text hereSOme text hereSOme text hereSOme  
     </div>
</div>

和CSS类：

#outer{
height:150px;
background-color:red
}

#inner{
width:75%;
height:auto;
background-color:yellow;
max-height:100%;
overflow:hidden;
margin-left:14.5%;
margin-right:14.5%
}​

http://jsfiddle.net/hbRHW/

于 2012-10-30T06:10:58.860 回答