当窗口高度减小时，边距顶部百分比不会改变

发布于 2024-12-02 04:39:40 字数 427 浏览 1 评论 0 原文

我正在开发一个项目，其中客户希望导航

根据屏幕高度对齐，类似于 margin-left 作为百分比的工作原理屏幕宽度减小。

因此，我给了 margin-top: 20% 和导航

显示该边距，但是当我减小窗口的高度时，它不会根据屏幕进行调整高度，尽管当我减小屏幕宽度时它会起作用。

我的问题不是如何实现这一目标，而是为什么百分比是水平工作而不是垂直工作？

这是一个示例：http://jsfiddle.net/sandeep/5VReY/

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

遮了一弯 2024-12-09 04:39:40

根据 css 规范，百分比适用于容器块的宽度

百分比是根据宽度计算的
生成的盒子的包含块。请注意，这适用于
'margin-top' 和 'margin-bottom' 以及。

请参阅 w3.org 了解更多信息。

回复收藏 0 原文

辞别 2024-12-09 04:39:40

您可以在“auto”中播放具有 margin 属性的 width top/bottom 属性；

如果你有一个像这样的块：

<div class="centered"></div>

它可能像这样垂直居中：

.centered {
    width: 100px; height: 100px; /* must be present. No matter the value */
    position: absolute;          /* to props top/bottom take effect */
    margin: auto;                /* here's the magic. */

    bottom: 0px; top: 0px;       /* This is how you center a block verticaly */
}

水平对齐宽度左/右属性可以实现相同的效果。您还可以设置偏移量，以便移动块中心以外的其他点。

在这里，我给您留下了一些示例，说明结合这些属性可以做什么以及如何做。
http://jsfiddle.net/SQDJ6/

You can play width top/bottom properties having margin prop in "auto";

If you have a block like this:

<div class="centered"></div>

It may be centered verticaly like this:

.centered {
    width: 100px; height: 100px; /* must be present. No matter the value */
    position: absolute;          /* to props top/bottom take effect */
    margin: auto;                /* here's the magic. */

    bottom: 0px; top: 0px;       /* This is how you center a block verticaly */
}

The same can be achieved for horizontal alignment width left/right properties. You can also have an offset in order to ubicate other point than the center of the block.

Here I leave you some examples of what and how can be done combining these properties.
http://jsfiddle.net/SQDJ6/

回复收藏 0 原文

~没有更多了~