Home/ Questions/Q 767677
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T18:03:44+00:00

How would you go about evenly spreading elements across multiple lines, for example: wrapper

  • 0

How would you go about evenly spreading elements across multiple lines, for example:

wrapper div: <div style="text-align: center">
elements inside: <div style="display: inline-block;
                 padding-left: 10px; padding-right: 10px;">Element</div>

Instead of only having one element on the next line (wrapped):

Element 1        Element 2        Element 3        Element 4        Element 5
                          Element 6

It does this, spreading out the elements:

Element 1        Element 2        Element 3
Element 4        Element 5        Element 6
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If the width of the elements and their count is not fixed, I would write a code which generates custom markup depending on the situation.

    However it may get tricky because with the web medium, it’s hard (impossible actually) to calculate the actual size in pixels of a text block (no way of knowing what font will a browser use and get its metrics).

    I’d suggest deciding on the number of columns in advance (2 or 3) then using elements with their width set to 50% or 33% and text-align property to center.

    • 0