The alignment of 5 boxes is off, failing to position them in the center of the page

Question

The alignment of 5 boxes is off, failing to position them in the center of the page

Just dipping my toes into the world of programming. I managed to line up 5 boxes horizontally, but now I want to center them. The challenge is also making sure the boxes remain responsive. I've been scouring for ways to center a div, and all I come up with is margin: 0 auto; width: 800px;. However, when I resize my browser to 100%, the fifth box ends up below the others.

.square { 
float:left;
width: 12.5vw;
    height: 12.5vw;
    margin-left: 10px;
    margin-right: 10px;
position: relative;
border: 0.5px solid red;
text-align: center; 
}

.square span {
font-size: 3vw;
}

<div class="outside">
<div class="square">
<span>2.1</span>
</div>
<div class="square">
<span>2.3</span>
</div>
<div class="square">
<span>2.5</span>
</div>
<div class="square">
<span>2.6</span>
</div>
<div class="square">
<span>2.7</span>
</div>
</div>

html css centering

Answer 1

Answer №1

If you want a simple solution, try removing the floating property from the inner divs and instead display them as inline blocks. The outer container can have auto margins and center text alignment for a clean layout:

.outer {
  border: 1px solid blue;
  text-align: center;
  margin: 0 auto;
}

.box { 
  display: inline-block;
  width: 12.5vw;
  height: 12.5vw;
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
  border: 0.5px solid red;
  text-align: center;
}

.box span {
  font-size: 3vw;
}

<div class="outer">
  <div class="box">
    <span>2.1</span>
  </div>
  <div class="box">
    <span>2.3</span>
  </div>
  <div class="box">
    <span>2.5</span>
  </div>
  <div class="box">
    <span>2.6</span>
  </div>
  <div class="box">
    <span>2.7</span>
  </div>
</div>

Answer 2

If you want a simple solution, try removing the floating property from the inner divs and instead display them as inline blocks. The outer container can have auto margins and center text alignment for a clean layout:

.outer {
  border: 1px solid blue;
  text-align: center;
  margin: 0 auto;
}

.box { 
  display: inline-block;
  width: 12.5vw;
  height: 12.5vw;
  margin-left: 10px;
  margin-right: 10px;
  position: relative;
  border: 0.5px solid red;
  text-align: center;
}

.box span {
  font-size: 3vw;
}

<div class="outer">
  <div class="box">
    <span>2.1</span>
  </div>
  <div class="box">
    <span>2.3</span>
  </div>
  <div class="box">
    <span>2.5</span>
  </div>
  <div class="box">
    <span>2.6</span>
  </div>
  <div class="box">
    <span>2.7</span>
  </div>
</div>

Answer 3

Answer №2

To center the parent container, add either a max-width or width and use margin: 0 auto. Adjust the width of the parent element as needed – in this example, it is set to 520px.

According to W3Schools:

To horizontally center a block element (like ), use margin: auto;

Setting the width of the element will prevent it from stretching out to the edges of its container.

The element will then take up the specified width, with remaining space split equally between the two margins.

Refer to the example below.

.outside {
  max-width: 520px;
  margin: 0 auto;
}

.square { 
float:left;
width: 12.5vw;
    height: 12.5vw;
    margin-left: 10px;
    margin-right: 10px;
position: relative;
border: 0.5px solid red;
text-align: center; 
}

.square span {
font-size: 3vw;
}

<div class="outside">
<div class="square">
<span>2.1</span>
</div>
<div class="square">
<span>2.3</span>
</div>
<div class="square">
<span>2.5</span>
</div>
<div class="square">
<span>2.6</span>
</div>
<div class="square">
<span>2.7</span>
</div>
</div>

Answer 4

To center the parent container, add either a max-width or width and use margin: 0 auto. Adjust the width of the parent element as needed – in this example, it is set to 520px.

According to W3Schools:

To horizontally center a block element (like ), use margin: auto;

Setting the width of the element will prevent it from stretching out to the edges of its container.

The element will then take up the specified width, with remaining space split equally between the two margins.

Refer to the example below.

.outside {
  max-width: 520px;
  margin: 0 auto;
}

.square { 
float:left;
width: 12.5vw;
    height: 12.5vw;
    margin-left: 10px;
    margin-right: 10px;
position: relative;
border: 0.5px solid red;
text-align: center; 
}

.square span {
font-size: 3vw;
}

<div class="outside">
<div class="square">
<span>2.1</span>
</div>
<div class="square">
<span>2.3</span>
</div>
<div class="square">
<span>2.5</span>
</div>
<div class="square">
<span>2.6</span>
</div>
<div class="square">
<span>2.7</span>
</div>
</div>

Answer 5

Answer №3

apply text-align center to outside

.outside{
  text-align:center;
}

Delete float & insert display inline-block square

.square{
    display:inline-block;
    width: 12.5vw;
    height: 12.5vw;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
    border: 0.5px solid red;
    text-align: center; 

}

Answer 6

apply text-align center to outside

.outside{
  text-align:center;
}

Delete float & insert display inline-block square

.square{
    display:inline-block;
    width: 12.5vw;
    height: 12.5vw;
    margin-left: 10px;
    margin-right: 10px;
    position: relative;
    border: 0.5px solid red;
    text-align: center; 

}

Answer 7

Answer №4

I didn't completely grasp your requirements, but you can try the following solution. This code snippet will not only center your boxes but also prevent them from wrapping to the next line when the resolution is reduced.

Update your CSS with:

.square { 
    float: left;
    width: 19%;
    height: 12.5vw;
    margin-right: 1%;
    position: relative;
    border: 0.5px solid red;
    text-align: center;
    box-sizing: border-box; 
}

.square span {
    font-size: 3vw;
}

.outside {
    width: 100%;
}

.inside {
    width: 69%;
    margin: 0 auto;
    overflow: auto;
}

Now, adjust your HTML as follows:

<div class="outside">
  <div class="inside">
        <div class="square">
            <span>2.1</span>
        </div>
        <div class="square">
            <span>2.3</span>
        </div>
        <div class="square">
            <span>2.5</span>
        </div>
        <div class="square">
            <span>2.6</span>
        </div>
        <div class="square">
            <span>2.7</span>
        </div>
   </div>
</div>

Answer 8

I didn't completely grasp your requirements, but you can try the following solution. This code snippet will not only center your boxes but also prevent them from wrapping to the next line when the resolution is reduced.

Update your CSS with:

.square { 
    float: left;
    width: 19%;
    height: 12.5vw;
    margin-right: 1%;
    position: relative;
    border: 0.5px solid red;
    text-align: center;
    box-sizing: border-box; 
}

.square span {
    font-size: 3vw;
}

.outside {
    width: 100%;
}

.inside {
    width: 69%;
    margin: 0 auto;
    overflow: auto;
}

Now, adjust your HTML as follows:

<div class="outside">
  <div class="inside">
        <div class="square">
            <span>2.1</span>
        </div>
        <div class="square">
            <span>2.3</span>
        </div>
        <div class="square">
            <span>2.5</span>
        </div>
        <div class="square">
            <span>2.6</span>
        </div>
        <div class="square">
            <span>2.7</span>
        </div>
   </div>
</div>

The alignment of 5 boxes is off, failing to position them in the center of the page

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The color of the SVG is not visible in the PNG rendition

How can I store HTML5 input type date/time data accurately as Date Time in Rails?

How to locate href links with Selenium and Java

Vertical Alignment of Bootstrap Columns

Images in Angular Firebase causing scroll problems in Chrome

A guide to adding images to dropdown options in Angular 6

How come I'm unable to showcase the inventory of items to the customer even though they are saved in the database and visible in the Network tab on the console?

The Z-index property does not seem to be functioning properly for a drop-down component that is located within a disclosure panel

Developing a custom JavaScript function to iterate through a group of html elements

Stylish Wave Animation Effects in CSS for iPad Native Application

Loading data with Ajax from a remote file using a specific identifier

Achieving a dynamic scrollable table that adjusts its height based on its parent container (HTML + Bootstrap)

Continue duplicating image to stretch header across entire screen

How can you use the transform property in CSS to rotate the dropdown arrow by 180 degrees and move it vertically by 2 pixels?

Issue identified in the recent Bootstrap 4 update: now accepting offset-md-* instead of col-offset-md-* as the

Struggling with the alignment of pictures inside a container

Adding the header.php file in WordPress caused the style.css to stop working

CSS media query does not ensure that images will always fill the container to 100% width

Tips for preventing the collapse of a table row using a button?

Unable to eliminate added jQuery Element