Trung tâm CSS Responsive DIV

Question

"Các ô" (các hộp màu trắng) mà bạn thấy trong hình 1 được đáp ứng với màn hình người dùng. Nếu kích thước màn hình không đủ lớn, nó để lại một khoảng trống ở phía bên tay phải. Những gì tôi muốn làm là đạt được kết quả như đã thấy trong hình ảnh 2. Đây là mã của tôi cho đến nay đối với những yếu tố cụ thể ..

HTML:

<div class="main"> 
    <div class="inner"> 
     <div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div> 
    </div> 
</div> 

CSS:

.main{ 
    width:100%; 
    background: #000; 
} 

.main .inner{ 
    margin:10px; 
    min-width: 140px; 
    background: red; 
} 

.main .inner .tile{ 
    margin:10px; 
    height: 120px; 
    width: 120px; 
    background: #fff; 
    display: inline-block; 
} 

IMAGE 1:

IMAGE 2:

Answer 1

Bạn có thể làm điều này với giới truyền thông truy vấn để đặt chiều rộng của lớp .inner ở độ rộng trình duyệt khác nhau, sau đó đặt thuộc tính margin-left và margin-right thành auto để căn giữa nó. Đặt các thuộc tính padding-top và padding-bottom của lớp .main thay vì đặt lề trên và dưới trên lớp .inner. Sử dụng kết hợp của padding trên lớp .inner và border trên lớp .tile để tách khoảng cách cách nhau 10px.

Đối với một mô tả chi tiết của các truy vấn phương tiện truyền thông: CSS media queries

example

css

.main{ 
    width: 100%; 
    background: #000; 
    padding-top: 10px; 
    padding-bottom: 10px; 
} 

.main .inner{ 
    padding: 5px; 
    font-size: 0px; 
    display: table; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: red; 
} 

.main .inner .tile{ 
    margin: 0px; 
    padding: 0px; 
    border: 5px solid red; 
    height: 120px; 
    width: 120px; 
    background: #fff; 
    display: inline-block; 
} 

Đặt truy vấn phương tiện truyền thông cho mỗi chiều rộng của trình duyệt, trong ví dụ này, tôi chỉ có đi lên đến 800px, nhưng bạn có thể thêm bao nhiêu tùy thích.

css (tiếp theo)

@media (min-width: 280px) { 
    .main .inner{ 
     width: 130px; 
    } 
} 

@media (min-width: 320px) { 
    .main .inner{ 
     width: 260px; 
    } 
} 

@media (min-width: 480px) { 
    .main .inner{ 
     width: 390px; 
    } 
} 

@media (min-width: 640px) { 
    .main .inner{ 
     width: 520px; 
    } 
} 

@media (min-width: 800px) { 
    .main .inner{ 
     width: 780px; 
    } 
} 

Các truy vấn phương tiện truyền thông được sử dụng để thiết lập chiều rộng của .inner đến một bội số của 130px đó là chiều rộng của một .tile với một biên giới 10px.

Nếu bạn muốn thay đổi khoảng cách giữa gạch bạn sẽ cần phải thay đổi border trên lớp .tile, các padding trên lớp .inner, các margin-top và margin-bottom trên lớp .main và width được chỉ định trong mỗi các truy vấn phương tiện.

Answer 2

.main .inner{ 
    min-width: 140px; 
    background: red; 
    text-align:center; 
    } 

Thêm text-align: center sở hữu css http://jsfiddle.net/dolours/afKgg/

Answer 3

Bạn có thể thiết lập max-width cho .inner sau đó có text-align: center cho .main