CSS中心响应DIV

Question

您在图像1中看到的“图块”（白框）对用户屏幕有响应。如果屏幕尺寸不够大，则会在右侧留下间隙。我想要做的是实现结果作为图像2.看到这里是我到目前为止的代码，这些具体的元素..

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：

图2：

Answer 1

你可以用媒体做查询以各种浏览器宽度设置.inner类的宽度，然后将margin-left和margin-right属性设置为auto来居中。设置.main类的padding-top和padding-bottom属性，而不是在.inner类中设置顶部和底部页边空白。使用.inner类中的padding和.tile类中的border的组合将间隔分开。

有关媒体查询的详细介绍：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; 
} 

设置每个浏览器的宽度媒体查询，在这个例子中，我只上升到800像素，但您可以根据需要添加更多。

CSS（续）

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

媒体查询用于的.inner宽度设定为130px倍数其是.tile的与10px的边界的宽度。

如果你想改变的瓷砖之间的间隔，你需要改变的.main类的.tile类border，在.inner类padding的margin-top和margin-bottom和在各指定的width媒体查询。

Answer 2

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

添加文本对齐：中心CSS属性http://jsfiddle.net/dolours/afKgg/

Answer 3

您可以设置最大宽度为.inner然后有text-align: center为.main