Guide: Aligning Content to the Left within a Centered Container

Question

Guide: Aligning Content to the Left within a Centered Container

Issue

I am facing a challenge in aligning blocks to the left within a centered wrapper that has a dynamic width. Despite trying only HTML and CSS, I have been unsuccessful in achieving this.

To see an example of what I am dealing with, you can view this JSFiddle: https://jsfiddle.net/hudxtL8L/

Demonstration

My current layout resembles the following:

|  _____   _____           |
| |     | |     |          |
| |     | |     |          |
| |_____| |_____|          |
|  _____   _____           |
| |     | |     |          |
| |     | |     |          |
| |_____| |_____|          |
|  _____                   |
| |     |                  |
| |     |                  |
| |_____|                  |
|                          |

However, I aim for it to appear as follows:

|       _____   _____      |
|      |     | |     |     |
|      |     | |     |     |
|      |_____| |_____|     |
|       _____   _____      |
|      |     | |     |     |
|      |     | |     |     |
|      |_____| |_____|     |
|       _____              |
|      |     |             |
|      |     |             |
|      |_____|             |
|                          |

Alternatively, on larger screens, my goal is for it to resemble something like this:

|       _____   _____   _____     |
|      |     | |     | |     |    |
|      |     | |     | |     |    |
|      |_____| |_____| |_____|    |
|       _____   _____   _____     |
|      |     | |     | |     |    |
|      |     | |     | |     |    |
|      |_____| |_____| |_____|    |
|       _____                     |
|      |     |                    |
|      |     |                    |
|      |_____|                    |
|                                 |

The key requirement here is that the last row must be aligned to the left rather than being centered within the parent container. Is there a way to achieve this? My attempts so far have not yielded successful results.

Approaches Tried

Using margin: 0 auto proved unfruitful as it necessitates a fixed width, whereas I prefer having as many elements per row as possible.

Exploring a solution involving table layouts also presented challenges since I cannot predict the number of elements fitting on a single line based on the device's characteristics.

Though resorting to JavaScript offers a viable fix, I suspect there may exist a CSS-only resolution to address this issue more elegantly.

html css web centering

Answer 1

Answer №1

To achieve this layout, you can utilize CVS flex.

Start by creating a container, #content, with a fixed width and center it using margin: 0 auto.

Add the flex properties to #content and use justify-content: space-between for positioning the child elements.

The child elements .elements should have flex-basis: 100px to define their width within the flex container.

You can adjust the spacing between elements by adjusting margins.

For more information, refer to: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout

#viewport {
  border: 1px solid black;
}
#content {
  width: 250px;
  margin: 0 auto;
  border: 1px dashed blue;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.element {
  border: 1px dotted black;
  flex-basis: 100px;
  height: 100px;
  margin: 10px; /* optinal, gives you some control on spacing */
}

<div id="viewport">
  <div id="content">
    <div class="element">1</div>
    <div class="element">2</div>
    <div class="element">3</div>
    <div class="element">4</div>
    <div class="element">5</div>
  </div>
</div>

Answer 2

To achieve this layout, you can utilize CVS flex.

Start by creating a container, #content, with a fixed width and center it using margin: 0 auto.

Add the flex properties to #content and use justify-content: space-between for positioning the child elements.

The child elements .elements should have flex-basis: 100px to define their width within the flex container.

You can adjust the spacing between elements by adjusting margins.

For more information, refer to: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout

#viewport {
  border: 1px solid black;
}
#content {
  width: 250px;
  margin: 0 auto;
  border: 1px dashed blue;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.element {
  border: 1px dotted black;
  flex-basis: 100px;
  height: 100px;
  margin: 10px; /* optinal, gives you some control on spacing */
}

<div id="viewport">
  <div id="content">
    <div class="element">1</div>
    <div class="element">2</div>
    <div class="element">3</div>
    <div class="element">4</div>
    <div class="element">5</div>
  </div>
</div>

Answer 3

Answer №2

Is this the desired format:

#content {
  width: 300px;
  border: 1px solid red;
}
#outer {
  text-align: center;
  border: 1px solid green;
}

#inner {
  display: inline-block;
  text-align: left;
  border: 1px solid blue;
  padding: 20px;
}

.element {
  display: inline-block;
  border: 1px solid black;
  width: 100px;
  height: 100px;
  margin-left: 15px;
}

Answer 4

Is this the desired format:

#content {
  width: 300px;
  border: 1px solid red;
}
#outer {
  text-align: center;
  border: 1px solid green;
}

#inner {
  display: inline-block;
  text-align: left;
  border: 1px solid blue;
  padding: 20px;
}

.element {
  display: inline-block;
  border: 1px solid black;
  width: 100px;
  height: 100px;
  margin-left: 15px;
}

Answer 5

Answer №3

 #container {
    display: block;
    text-align: left;
    border: 1px solid red;
    margin-top: 10px;
    padding: 5px;
  }
  .item:last-of-type {
     margin-left:15px;
  }

Ensure the use of text-align-last: left property

Answer 6

 #container {
    display: block;
    text-align: left;
    border: 1px solid red;
    margin-top: 10px;
    padding: 5px;
  }
  .item:last-of-type {
     margin-left:15px;
  }

Ensure the use of text-align-last: left property

Guide: Aligning Content to the Left within a Centered Container

Issue

Demonstration

Approaches Tried

Answer №1

Answer №2

Answer №3

Similar questions

Adjusting image size according to browser dimensions

Struggling to navigate to a specific div element using a hash in an Angular application

Triggering this function when clicked

What is causing the discrepancy in the height of my bootstrap 4 columns?

Tailored alignment of checkboxes and labels

What is causing my h2 and div elements to share the same font size?

Animate owlCarousel slide motion in reverse when using the Prev and Next buttons

Detecting When an Element is About to Be Deleted by Pressing Backspace in a Contenteditable HTML Element

Issue with displaying footer properly

Ways to keep the position of an expanded collapsible table from Material UI intact

Overlay displayed on top of a single div element

What are some creative ways to conceal text using CSS or JavaScript?

"Can you provide instructions on how to set the background to the selected button

Position the menu links in different alignments - some to the right and others to the

Having trouble with spawning child processes asynchronously in JavaScript

Forwarding the main webpage from the child Html.renderAction without the need for Ajax, Java, Jquery, or similar technologies

Display an empty string when a value is NULL using jQuery's .append() function

Leveraging ng-class with multiple conditions

Creating a Web Form in Outlook Using the POST Method

Importing .js files from the static folder in Nuxt.js: a step-by-step guide