CSS Center Responsive DIV

守給你的承諾、 提交于 2020-01-12 08:04:10

问题


The "tiles" (white boxes) that you see in image 1 are responsive to the users screen. If the screen size just isn't big enough, it leaves a gap on the right hand side. What I want to do is achieve the result as seen in image 2. Here is my code so far for those specific elements..

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:


回答1:


You can do this with media queries to set the width of the .inner class at various browser widths, then set the margin-left and margin-right properties to auto to center it. Set the padding-top and padding-bottom properties of the .main class instead of setting top and bottom margins on the .inner class. Use a combination of padding on the .inner class and border on the .tile class to space the tiles out evenly 10px apart.

For a detailed description of media queries: 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;
}

Set a media query for each browser width, in this example I have only gone up to 800px, but you can add as many more as you need.

css (continued)

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

The media queries are used to set the width of .inner to a multiple of 130px which is the width of a .tile with a border of 10px.

If you want to change the spacing between the tiles you would need to alter the border on the .tile class, the padding on the .inner class, the margin-top and margin-bottom on the .main class and the width that is specified in each of the media queries.




回答2:


You could set max-width for .inner then have text-align: center for .main




回答3:


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

Add text-align:center css property http://jsfiddle.net/dolours/afKgg/



来源:https://stackoverflow.com/questions/15857276/css-center-responsive-div

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!