Responsive Centered Content

Whether images, tables, divs, or other blocks of content, they can be arranged in rows — each row centered within the column.

The rows wrap their blocks of content according to the available width.

The div that contains the blocks of content has these 3 CSS rules:

1. display:flex; (Specifies how the div shall display. Other display rules you may be familiar with are display:block; and display:inline;. If interested in other display options, see MDN display web document.)

2. flex-wrap:wrap; (Specifies that the layout shall arrange the blocks of content in rows and wrap the rows as needed.)

3. justify-content:center; (Specifies that the blocks of content shall be centered on the available width.)

Below is a demonstration of what I'm talking about. If you are on a narrow phone screen, try switching between landscape and portrait for viewing the demonstration. On desktop, the browser width can be changed.

The store is open!

Come on in.

Be greeted by a friendly face.

$

Everything guaranteed!

To create the above, two things are needed:

1. A div with CSS display:flex;, flex-wrap:wrap;, and justify-content:center; declarations. (The flex page has more information about the display value flex.)

2. Content to put into that container div.

Here is the CSS for the div that will contain the content, the container div.

<style>
.flexible-content-container {
   display:flex;
   flex-wrap:wrap;
   justify-content:center;
   }
</style>

And here is how the div is used.

<div class="flexible-content-container">
[CONTENT]
</div>

For the demonstration, the flexible-content-container class must have those three declarations. It may have additional declarations, too. You may wish to specify a width or maximum width, margins, padding, borders, or other styling.

The content in that container div may be divs, tables, images, pretty much any content that can be published on a web page. They can be mixed, too; perhaps both tables and divs.

The demonstration you see further above contains bordered divs with content. The bordered div dimensions are 100 pixels, with margins, padding, and other styling. The div has flexible-content-div as its CSS class name.

Here is the source code for the entire demonstration.

<style>
.flexible-content-container {
   display:flex;
   flex-wrap:wrap;
   justify-content:center;
   }
.flexible-content-div { 
   width:100px; 
   height:100px; 
   margin:0 .5em .5em 0;
   padding:.5em;
   border-radius:.5em;
   border:1px solid hsl(240,100%,50%); 
   background-color:white;
   overflow:hidden;
   }
</style>

<div class="flexible-content-container">

<div class="flexible-content-div">
<div style="text-align:center; margin-top:1.9em;">
The store is open!
</div>
</div><!-- class="flexible-content-div" -->

<div class="flexible-content-div">
<div style="text-align:center; margin-top:.6em;">
Come on in.
</div>
<div style="text-align:center; margin-top:.5em;">
Be greeted by a friendly face.
</div>
</div><!-- class="flexible-content-div" -->

<div class="flexible-content-div">
<div style="text-align:center; margin-top:calc(50% - 25px);">
<img src="https://painfreecart.com/cartimages/mycart50.png" style="height:50px; border:none; outline:none;" alt="image of something">
</div>
</div><!-- class="flexible-content-div" -->

<div class="flexible-content-div">
<div style="text-align:center; font-size:90px; font-family:sans-serif; color:hsl(120,93%,42%); font-weight:bold; line-height:85px;">
$
</div>
</div><!-- class="flexible-content-div" -->

<div class="flexible-content-div">
<div style="text-align:center; margin-top:1.8em;">
Everything guaranteed!
</div>
</div><!-- class="flexible-content-div" -->

</div><!-- class="flexible-content-container" -->

To become familiar with it, I encourage you to replace some of the content within the flexible content container. Images of various sizes might be used to see how the content is flowed.

You see how simple it really is, or will with a bit of practice. In essence, you create a div with display:flex; and put content into the div.

This article first appeared with an issue of the Possibilities newsletter.

Will Bontrager