CSS带有自动边距的固定位置 [英] CSS Fixed position with Auto Margin

问题描述

我想要一个保持页面水平中心（两列）的组件，而且我有一个子组件（右列），我希望它的位置是固定的，所以子组件的位置是固定的，但整个两列要居中。

I want a component that keeps horizontal center of the page (two-columns), and I have a sub-component (right column) that I want its position to be fixed, so the sub-component's position to be fixed, but the whole two columns to be centered.

#content {
    width: 1200px;
    height:auto !important;
    height:100%;
    min-height:100%;
    padding-top: 42px;
    padding-bottom: 100px;
    margin-auto: 0 auto;
    position: relative;
}

#left {
    width: 700px;
    float: left;
}

#right {
        width: 500px;
        position: fixed;
        top: 0px;
}

推荐答案

code> margin：auto ，但您可以这样做：

You cant do that with margin:auto, but you can do something like this:

#CSS-SELECTOR-YOU-ARE-USING{
    background:#FF0000; // Just so you can see whats going on
    position:fixed; // Position the element
    right:50%; // Move it to the right for 50% of parent element
    margin-right:-250px; // You need here to put 1/2 of what you have below in width
    width:500px;
}

这样，将元素向右移动50％，然后将其移动回到其宽度的一半。这样你就可以用 position：fixed 来获得中心元素。

This way you move element to the right for 50%, and then move it back for half of its width. That way you get centered element with position:fixed.

这篇关于CSS带有自动边距的固定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！