0

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

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

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

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

4

2 回答 2

0

使用 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/

或检查对此问题给出的大量答案之一：

如何在另一个 <div> 中水平居中一个 <div>？

于 2013-12-29T13:18:58.737 回答
0

骨架网格分为 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>

你也可以只做四列偏移两

于 2013-12-29T13:28:30.353 回答