CSS Vị trí cố định với Ký tự tự động

Question

Tôi muốn một thành phần giữ trung tâm nằm ngang của trang (hai cột) và tôi có một thành phần phụ (cột bên phải) mà tôi muốn vị trí của nó được cố định, vì vậy phụ vị trí của thành phần được cố định, nhưng toàn bộ hai cột sẽ được căn giữa.

#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; 
} 

Answer 1

Bạn không thể làm điều đó với margin:auto, nhưng bạn có thể làm điều gì đó như thế này:

#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; 
} 

Bằng cách này bạn di chuyển yếu tố bên phải 50%, và sau đó di chuyển nó trở lại cho một nửa của mình chiều rộng. Bằng cách đó, bạn có được yếu tố trung tâm với position:fixed.

Answer 2

Tôi thích sử dụng một wrapper như asolution cho vấn đề này:

.wrapper { 
    position: fixed; 
    width: 100%; 
    top: 0px; 
} 
.wrapper .right { 
    width: 500px; 
    margin: auto; 
} 

Answer 3

Bạn có thể sử dụng margin: 0 auto với position: fixed nếu bạn thiết lập left và right.

.wrapper { 
    position:fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    width: 500px; 
    margin: 0 auto; 
} 

Điều này cũng hoạt động với position: absolute; và theo chiều dọc.

Bản trình diễn: http://codepen.io/pstenstrm/pen/myaWVJ