Question

我正在寻找以下方法：

--------------------------|--------------------------
|    |                                              |
|    |           -------------------------          |
|fix-|           |                       |          |
|ed  |           |                       |          |
|    |           |       #content        |          |
|menu|           |                       |          |
|    |           |                       |          |
|    |           |                       |          |
|    |           -------------------------          |
|    |                                              |
|    |                                              |
--------------------------|--------------------------

我需要它，以便内容区域在窗口的右边缘和固定菜单之间水平居中。我正在使用正确区域的骨架样板，如果我可以将它集中在中心，我会很感激，尽管我不确定它是否会破坏骨架来做到这一点。

我仍然对这一切都很陌生，我想先发制人，谢谢你的帮助。

Answer 1

使用css的margin属性

#content{
   display:block;
   margin: 10px auto; /* set top margin to whatever you want */
   width: 100px; /* width of the object */
   height: 100px; /* height of the object */
}

或者，如果您可以将位置设置为fixed，则另有一种方法：

#content {
  position: fixed;
  top: 50%;
  left: 50%;
}

实现的目的是将图像的左上角准确地放在页面的中心，而不是页面中心的图像中心。为了使图像准确居中，这是一个简单的问题，即应用图像高度的一半的负上边距和图像宽度的一半的负左边距。对于这个例子，像这样：

#center {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

查看此文章：http://designshack.net/articles/css/how-to-center-anything-with-css/

或者查看给出这个问题的大量答案之一：

How to horizontally center a <div> in another <div>?

Answer 2

骨架网格分为12个。如果您再使用2个菜单，另外10个用于屏幕的其余部分。然后，您可以使用

将内容区域设为4

<div class="ten columns"> 
    <div class="two columns">
        put code here
    </div>
    <div class="four columns">
        put code here
    </div>
    <div class="two columns">
        put code here
    </div>
</div>

你也可以做四个偏移两个列

如何在主页和固定菜单之间水平居中主div。使用骨架

2 个答案: