When aligning divs at the center, they may not all be perfectly in a straight

My goal is to align 4 div boxes in a vertical line using the translate method typically used for centering objects on a webpage. Here is the code snippet I have utilized: link

.body-component {
  position: relative;
  margin: 10px;
  color: #000;
  display: inline-block;
  vertical-align: top;
  background-color: #ff6d00;
  overflow: auto;
  border: 1px solid #D0D3D4;
}

.width-medium {
  width: 500px;
}

.height-medium {
  height: 400px;
}

.code-snippet {
  position: relative;
  width: 95%;
  height: 95%;
  background-color: #000;
}

.snippet-title {
  position: absolute;
  color: #248b98;
  font-family: "Open Sans", sans-serif;
  padding: 15px;
  text-decoration: underline;
  z-index: 1;
}

.center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0px;
}

.boxes {
  position: relative;
  width: 100%;
  height: 100%;
}

.box1 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #056ab3;
  top: 20%;
  left: 50%;
  transform: translate(-20%, -50%);
}

.box2 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #056ab3;
  top: 40%;
  left: 50%;
  transform: translate(-40%, -50%);
}

.box3 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #056ab3;
  top: 60%;
  left: 50%;
  transform: translate(-60%, -50%);
}

.box4 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #056ab3;
  top: 80%;
  left: 50%;
  transform: translate(-80%, -50%);
}
<div class="body-component width-medium height-medium">
      <span class="snippet-title">Box loading animation</span>
      <div class="code-snippet center">
        <div class="boxes">
          <div class="box1"></div>
          <div class="box2"></div>
          <div class="box3"></div>
          <div class="box4"></div>
       </div>
    </div>
</div>

I have attempted various methods to address this issue, but I am hesitant to use fixed pixel values for alignment due to the responsive nature of my website.

htmlcss

Answer №1

To position absolutely, try using left: 50% along with a negative value for translateX set to 50%.

.body-component {
  position: relative;
  margin: 10px;
  color: #000;
  display: inline-block;
  vertical-align: top;
  background-color: #ff6d00;
  overflow: auto;
  border: 1px solid #D0D3D4;
}

.width-medium {
  width: 500px;
}

.height-medium {
  height: 400px;
}

.code-snippet {
  position: relative;
  width: 95%;
  height: 95%;
  background-color: #000;
}

.snippet-title {
  position: absolute;
  color: #248b98;
  font-family: "Open Sans", sans-serif;
  padding: 15px;
  text-decoration: underline;
  z-index: 1;
}

.center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0px;
}

.boxes {
  position: relative;
  width: 100%;
  height: 100%;
}

.box {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #056ab3;
  left: 50%;
  transform: translateX(-50%)
}

.box1 {
  top: 20%;
}

.box2 {
  top: 40%;
}

.box3 {
  top: 60%;
}

.box4 {
  top: 80%;
}
<div class="body-component width-medium height-medium">
  <span class="snippet-title">Box loading animation</span>
  <div class="code-snippet center">
    <div class="boxes">
      <div class="box box1"></div>
      <div class="box box2"></div>
      <div class="box box3"></div>
      <div class="box box4"></div>
    </div>
  </div>
</div>

You may also utilize flexbox to create this design layout dynamically without having to predetermine the number of boxes required for vertical spacing.

html,
body {
  margin: 0;
  padding: 0;
  color: #248b98;
  font-family: "Open Sans", sans-serif;
}

.body-component {
  background-color: black;
  height: 100vh;
  border: 10px solid #ff6d00;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-betwen;
  align-items: center;
  min-height: 500px;
}

.snippet-title {
  flex: 0 1 auto;
  text-decoration: underline;
  padding: 10px;
}

.code-snippet {
  flex: 1 1 auto;
  display: flex;
}

.boxes {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}

.box {
  width: 30px;
  height: 30px;
  background-color: #056ab3;
}
<div class="body-component">
  <span class="snippet-title">Box loading animation</span>
  <div class="code-snippet">
    <div class="boxes">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
</div>

Answer №2

Here is a suggestion: try adding 

transform: translate(-50%, -50%);
to the box classes

.body-component {
  position: relative;
  margin: 10px;
  color: #000;
  display: inline-block;
  vertical-align: top;
  background-color: #ff6d00;
  overflow: auto;
  border: 1px solid #D0D3D4;
}

.width-medium {
  width: 500px;
}

.height-medium {
  height: 400px;
}

.code-snippet {
  position: relative;
  width: 95%;
  height: 95%;
  background-color: #000;
}

.snippet-title {
  position: absolute;
  color: #248b98;
  font-family: "Open Sans", sans-serif;
  padding: 15px;
  text-decoration: underline;
  z-index: 1;
}

.center {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0px;
}

.boxes {
  position: relative;
  width: 100%;
  height: 100%;
}

.box1 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #056ab3;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box2 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #056ab3;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box3 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #056ab3;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box4 {
  position: absolute;
  width: 30px;
  height: 30px;
  background-color: #056ab3;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="body-component width-medium height-medium">
      <span class="snippet-title">Box loading animation</span>
      <div class="code-snippet center">
        <div class="boxes">
          <div class="box1"></div>
          <div class="box2"></div>
          <div class="box3"></div>
          <div class="box4"></div>
       </div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure that a navbar dropdown appears above all other elements on

I'm having trouble creating a navbar dropdown with material design. The dropdown is working fine, but the issue I'm facing is that other elements are floating above it. https://i.stack.imgur.com/aJ0BH.png What I want is for the dropdown to floa ...

javascripthtmlcssmaterial-ui

HTML: Ensure that a user fills out a minimum of one text box before submission

<tr><td> First Name: </td><td><input type="text" name="FirstName" required></td> </tr> <tr><td> Last Name: </td><td><input type="text" name="LastName" required> </td></tr> ...

javascripthtml

A guide on choosing a custom button color and automatically reverting to its original color when another button is clicked

I have a collection of 24 buttons, all in a dark grey (#333333) shade. Whenever I click on one of the buttons, it changes to a vibrant blue color (#0099ff), which is functioning correctly. However, when I proceed to click on another button, the previous ...

javascriptphphtmlcss

Is it possible to maintain HTML, JS, and CSS files as separate entities when developing Vue.js components, similar to how it is

Is it possible to maintain separate HTML, JS, and CSS files while creating Vue.js components? I recently read the "Why Vue.js doesn't support templateURL" article which discusses this topic. "Proper modularization is a necessity if you want to bu ...

javascripthtmlvue.jsvuejs2vue-component

Adding turbolinks to an HTML document can be achieved without the need for a

Recently delving into the world of turbolinks, I discovered that it can be employed independently without relying on a client-side javascript framework. Eager to test this out, I created a bootstrap 4 template and attempted to install it. Firstly, I downl ...

javascripthtmlnode.jsbootstrap-4turbolinks

Can you please provide the CSS code that would style this table in a similar manner?

I am interested in utilizing the design of this table, but how can I update it to meet CSS standards and HTML5 equivalents? <html> <head></head> <body> <table border="1" bordercolor="#000000" style="background-color:#ffffff" w ...

htmlcss

What could be causing this hydration error in NextJS in the development server build but not in the production build?

By using the create-next-app command and implementing this code snippet, a hydration error occurs on the client side when running the next dev server. The code in pages/index.js: export async function getServerSideProps(context) { const x = Math.random( ...

javascripthtmlnext.jsserver-side-renderingdangerouslysetinnerhtml

What is the standard way elements are displayed within a box that is positioned absolutely?

My current setup involves setting <body> to be absolutely positioned in order to fill the entire viewport without needing to specify a height: body { width: 100%; margin: 0; padding: 0; position: absolute; top:0; right:0; bottom: ...

css

What is the best way to stop a select menu option from being highlighted once it has been clicked on?

Is there a way to prevent the highlighting of selected options in a <select> menu when a user makes a selection? <select id="my_select_menu"> <option id="1">Option 1</option> // I do not want this option to be highlighted ...

htmlcss

What is the best way to create a four-column layout using only CSS when the widths of the columns will vary?

I am looking to create a four-column layout using only CSS, where the width of the columns will adjust responsively. To better understand my issue, take a look at the code snippet below: .row { width: 100%; display: table; } .col { display: table ...

htmlcss

`Slide bootstrap carousel without moving other elements`

.carousel { position: relative; height: 500px; .carousel-inner .item { height: 500px; } .carousel-indicators > li { margin: 0 2px; background-color: $maincolor; border-color: $maincolor; opacity: .7; ...

htmlcsstwitter-bootstrapsass

Does anyone else have trouble with the Smtp settings and connection on Servage.net? It's driving me crazy, I can't figure it out!

Whenever I attempt to connect to send a servage SMTP, it gives me this error message: SMTP connect() failed. I have tried using the following settings: include('res/mailer/class.phpmailer.php'); $mail->SMTPDebug = 2; include('res/mai ...

javascriptphpcssemailsmtp

When I zoom in, a different div replaces the original div

I have recently delved into the world of HTML and CSS as I embarked on creating my own website. However, I seem to have hit a snag - when I zoom in on the content, it overlaps with the menu. I have scoured the internet for a solution to no avail, so any as ...

csshtmlzooming

Troubleshooting: ngAnimate max-height failing to apply to specific element

Having integrated ngAnimate into a project to enhance animations, I've encountered some unusual behavior with a specific element. Let me provide some context: our website features a shop with categories and products within those categories. I am usin ...

javascripthtmlcssangularjs

A design featuring a two-column layout, with one column remaining static while the other

I just finished putting together a two-column layout. <div class="layout"> <div class="col1"></div> <div class="col2"></div> </div> Check it out here There are a couple of things I'm wondering about: Is t ...

htmlcss

Ways to incorporate a dynamic value into a chart created with chart.js?

I want to create a doughnut chart representing the number of individuals who have tested positive for Coronavirus and the number of deaths related to it. How can I transfer the same data from the top container into the chart? The confirmedCases and deaths ...

javascripthtmljsonanimationchart.js

Learning how to track mouse wheel scrolling using jQuery

Is there a way to track mouse scrolling using jquery or javascript? I want the initial value to be 0 and increment by 1 when scrolling down and decrement by 1 when scrolling up. The value should always be positive. For example, if I scroll down twice, the ...

javascriptjqueryhtmlcss

retrieving a date from a different source and displaying it in a date

Is there a way to ensure that the date format in an input of type date always follows the dd/MM/yyyy Brazilian pattern, regardless of the computer or browser specifications? <div class="input-group input-group text-center in ...

javascripthtmlangular

Troubleshooting: Why the TableTools basic usage example is not functioning as

After replicating the code from http://datatables.net/release-datatables/extensions/TableTools/examples/simple.html in my Visual Studio project, I organized the files by saving two css files as style1.css and style2.css, along with three js files named sc ...

javascripthtmlcsstabletools

Tips for customizing the md-select icon

I work with the angular-material framework and specifically utilize its <md-select/> component. I am interested in styling its icon: https://i.stack.imgur.com/g4pu1.png In the past, we would modify its css by targeting the class .md-select-icon, ...

cssangularjsmaterial-designangular-material