Here is an image of what I want to do in CSS: image.
Any ideas?
Centering a variable-width grid after resizing the page
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.
I once made a FIDDLE to do this very thing. Nice answer.+1 –
Feces
My pleasure. Hope it helps someone one day :-) –
Feces
Put all the divs within another div and make the margin auto on both sides. See this comprehensive example: Problem centering div with css
The wrapping div won't work without specifying a width for it. –
Cosette
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.
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>
This won't work.
margin:auto requires an explicit width. In the question above the width is dynamic. –
Intangible 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>
© 2022 - 2024 — McMap. All rights reserved.
margin:0 auto;from being an option. – Intangible