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

【问题标题】：How to center main div horizontally between page and fixed menu. using skeleton如何在页面和固定菜单之间水平居中主 div。使用骨架
【发布时间】：2013-12-29 21:28:30
【问题描述】：

我正在寻找执行以下操作的最佳方法：

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

我需要它使内容区域在窗口右边缘和固定菜单之间水平居中。我将骨架样板用于正确的区域，如果我能将其居中，我将不胜感激，但我不确定这样做是否会破坏骨架。

我对这一切还是很陌生，我想先发制人，感谢您的帮助。

【问题讨论】：

菜单的宽度是否固定且已知？

标签： html css skeleton-css-boilerplate

【解决方案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>?

【讨论】：

【解决方案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>

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

【讨论】：