垂直偏移嵌套的 div答案

【问题标题】：Offsetting Nested Divs Vertically垂直偏移嵌套的 div
【发布时间】：2016-01-02 14:21:25
【问题描述】：

我目前正在开发一个简单的天气小部件，但在定位某些 div 时遇到了一些问题。我今天刚开始使用 CSS（但有其他编程语言的经验）。它需要向上 100 像素，我不知道为什么它会偏离这么多。

   <style>
      #weather
      {
        position: relative;
        width: 100%;
        height: 275px;

        margin-left: auto;
        margin-right: auto;
        text-align: center;

        background-color: rgba(32,32,32,0.5);

        border-style: solid;
        border-width: 1px;
        border-color: rgba(32,32,36,0.7);

        border-radius: 5px;
      }

      #temp
      {
        position: relative;
        width: 15%;
        height: 50;
        top: 30px;

        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }

      #wind
      {
        position: relative;
        width: 75%;
        height: 50;
        top: 30px;

        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }

      #desc
      {
        position: relative;
        width: 75%;
        height: 50;
        top: 30px;

        margin-left: auto;
        margin-right: auto;
        text-align: center;
      }
    </style>

这是发生定位错误的页面：http://www.thenorthcoastoutpost.com/lake

非常感谢任何有关定位 div/文本的帮助或提示。我尝试了多个使用不同 CSS 代码的网站，但似乎都没有帮助。

提前致谢。

【问题讨论】：

你想要哪个 div 在哪里？
天气 div 内的温度、风和降序。它们水平对齐，只是垂直根本不起作用。它完全对齐，但后来我在天气 div 中添加了一个轮廓，它就坏了。
它们已经垂直对齐。检查i.stack.imgur.com/zezzM.png
这很奇怪。它也没有显示正确的文本。我会截取屏幕截图，然后找个地方发布它，让你看看它在我的屏幕上的样子。
屏幕截图（移动端，但仍与桌面端相似）：m.imgur.com/puzDVjw

标签： html css position css-position

【解决方案1】：

要解决此问题，您需要进行一些更改：

navigation ul{
  margin: 0;
}
navigation ul li{
  padding: 5px 1em;
}
#innerWrapper{
  margin: 0 auto;
}

您可以只更改 CS 元素中的这些属性，或者将上面的 CSS 代码复制并粘贴到其他 CSS 代码下方。

【讨论】：

谢谢，我明天先试试这个。
我只是尝试将它注入页面（使用 Squarespace），它对我正在编辑的页面立即起作用，但实时页面似乎根本没有改变。不知道是什么原因造成的。
我发现了问题，但创建了一个新问题。删除#weather 中的边框元素可以解决问题，但我真的很想保留一个边框。我会提出一个不同的问题。