Centering a variable-width grid after resizing the page

前端未结

关注

 5  860

有刺的猬

Here is an image of what I want to do in CSS: image.

Any ideas?

相关标签:

5条回答

[愿得一人]

2021-01-14 10:38

Initial issue

Centering an element that has no explicit width

This prevents the usual solution of margin: 0 auto; from being an option.

Greater issue

There's no unused space for centering the wrapper in its container

An element is said to be shrink-wrapped if its width is determined by the width of its content. If the content changes in size, the width of the element changes likewise. This is the default behavior for elements that are inline, inline-block, or floated.

When content in a shrink-wrapped parent wraps around to the next row, the parent stops being shrink-wrapped; it now occupies the full width of its own container. Technically, the parent is centered, since it completely fills the container, but its content is not centered. And unless the parent has a noticeable bg color or wallpaper image, the parent will appear to not be centered either.

This also applies to some of the more advanced features, like CSS3 flexbox, apparently preventing that from being an option as well.

Solution

Media queries

It turns out there is a simple CSS solution. The basic issue is that a single layout grid of this sort can't support a wide range of screen sizes and still center the content. But with the help of CSS3 media queries, a variety of layout grids can be created, with the appropriate one chosen based on the screen size.

For example, a layout grid with 1 column is created, as well as one with 2 columns, and one with 3 columns, and so forth, for as many columns as may be needed. Whichever grid fits the current screen size, that's the one that's used. The layout grids might be identical except for the fixed width each one is given, a width that's just large enough to fit the number of columns. Since each grid has a fixed width, it becomes trivial to center them horizontally using margin: 0 auto;.

In other words, rather than trying to force a single layout to handle the full range of browser sizes, create many layouts, and choose the one that can easily handle the current browser size.

0 讨论(0)
发布评论:

提交评论
- 加载中...
忘了有多久

2021-01-14 10:39
Just give CSS property to wrapper as
```
#wrapper{
margin: 0px auto;
}
```
The above code will align center automatically when you resize the browser window. This is the process of adding responsiveness to your page.
0 讨论(0)
发布评论:

提交评论
- 加载中...
粉色の甜心

2021-01-14 10:46
Being too lazy to implement Media Queries (and the multiple scenarios to account for), I implemented a simple solution. Put the images in an unordered list (where li {display: inline-block}) and then (text-align: center) the wrapper. Adjust your margins etc. later to make it pretty.
```
<style>
    #wrapper {
        text-align: center;
    }
    #wrapper li {
        display: inline-block;
    }
</style>

<div id="wrapper">
    <ul>
        <li><img src=""></img></li>
        <li><img src=""></img></li>
        <li><img src=""></img></li>
        <li><img src=""></img></li>
        <li><img src=""></img></li>
    </ul>
</div>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
忘了有多久

2021-01-14 10:55

Put all the divs within another div and make the margin auto on both sides. See this comprehensive example: Problem centering div with css

0 讨论(0)
发布评论:

提交评论
- 加载中...

予麋鹿

2021-01-14 10:57

The div you want to center must have a width and you have to make set the margin auto. Here is an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
}

#wrapper{
width: 800px;
min-height: 200px;
margin: auto;
}

.block{
width: 100px;
height: 100px;
float: left;
}

</style>
</head>
<body>
<div id="wrapper">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>
</body>
</html>

0 讨论(0)