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

I am in need of a customized 'container' template that will display MyComponent based on a specific condition known as 'externalCondition'. MyComponent includes the usage of a Form and formValidation functionalities

container.html <div ngIf="externalCondition"> <!--Initially this is false. Later became true --!> <my-component #MyComponentElem > </my-component> <button [disabled]= "!myComponentElemRef.myDetailsF ...

htmlangulartypescriptdomangular-forms

Creating a CSS design where the border is contained within an element, especially when the border radius is specified

The concept of the title might be a bit confusing, but let me clarify. I am attempting to replicate this particular effect (taken from a .png file): This is essentially half a cycle with a black line inside it. Despite numerous attempts, I have been un ...

htmlcsscss-shapes

Drop the prohibited cursor before dragging

Is there a way to change the cursor behavior during element drag using HTML5 default drag and drop with TypeScript? I have tried various methods like changing from ev.target.style.cursor to "grab" cursor, adjusting dropEffect, etc., but none of them give m ...

htmlangulardrag-and-dropdrag

Options in Joomla Back-end Plugin

Just started diving into Joomla programming and I managed to create a plugin that functions perfectly. However, there's one small issue that's been bothering me all day. The configuration options in the back-end are shifted by a 180px left margin ...

htmlcssjoomla

Is it possible to replace text on click using CSS instead of jQuery?

My new project involves creating a flashcard system. The idea is that when a question is clicked, it reveals the answer and hides the question. To achieve this, I am currently using the following code: jsFiddle <p id="shown">What is stackoverflow?&l ...

jqueryhtmlcssclickshow-hide

Creating a webpage header with Javascript to mimic an existing design

I am in the process of building a website with 5 different pages, but I want the header to remain consistent across all pages. To achieve this, I plan to use an external JavaScript file (.js). The header includes the website name (displayed as an image) an ...

javascripthtml

Styling <Link> component with styled-components: A step-by-step guide

Utilizing the Link component from @material-ui/core/Link in my TypeScript code was initially successful: <Link href="#" variant="body2"> Forgot? </Link> However, I am exploring the transition to styled-components located in a separate file. ...

javascriptcssreactjstypescriptmaterial-ui

Attempting to incorporate Google charts into a div using jQuery's load function

Trying to incorporate a basic Google chart using jQuery .load functionality to transfer the chart into another webpage with a specific containing DIV: <html> <head> <script type="text/javascript" src="https://www.google.com/jsapi">< ...

javascriptjqueryhtmlcharts

The Javascript function is triggered only upon the second click

My goal is to retrieve prescription details for a specific patient, with the results displayed in a modal window. However, I am encountering an issue where the first result is only obtained on the second click. Subsequent clicks display the results of the ...

javascriptjqueryhtml

A unique technique for creating a stunning visual effect with images using

Can anyone help me with this issue: Check out this animated GIF The images in my project are overlapping when scrolling! How can I achieve a similar effect for my images? Is there a tutorial or plugin available for this? Here is the current code sn ...

javascripthtmlcss

Lost navigation hover effect when media size decreases

I followed a tutorial to create a responsive navigation menu that was working perfectly here: After adding a logo and some additional elements, I noticed that the hover effect was missing when the media size changes, which can be seen here: I suspect the ...

htmlcss

Can I add different tags directly inside a div container in Bootstrap 3 without using .row and .col?

Should I place a tag directly inside in Bootstrap 3? or is it better to have each inside .row>.col-md-# Is this layout acceptable, or could it potentially cause issues on mobile devices? <div class="container"> <h1>Lorem ipsum dolor sit ...

csstwitter-bootstraptwitter-bootstrap-3css-frameworks

Is there a way to fade just the div element without affecting the text?

Is there a way to apply fade in/out effect only to the background of the div, without affecting the text inside? You can view my code snippet here: https://jsfiddle.net/tc6fq235/3/ <div class="fade">Hover over me.</div> .fade { background- ...

htmlcssfade

Angular 6 and Typescript: How to Map Objects in Arrays within Arrays

We currently have two arrays named speisekarte (consisting of 10 objects) and essensplan (containing 8 objects). const speisekarte = [ { id: 11, name: 'Kabeljaufilet', price: 3.55, type: 'with fish' }, { id: 12, name: 'Spaghet ...

htmlarraysangulartypescriptmapping

Update the content of a div element with the data retrieved through an Ajax response

I am attempting to update the inner HTML of a div after a certain interval. I am receiving the correct response using Ajax, but I am struggling to replace the inner HTML of the selected element with the Ajax response. What could be wrong with my code? HTM ...

javascriptjqueryhtmlajax

extracting characters in php

Here's the HTML code I'm working with: <p style="color:red;font-size:12px;">This budget-friendly car offers great value, complete with air conditioning making it perfect for couples and small families. There is a ?500 excess, but it can be ...

phphtmlsubstring

Implement a feature in JS/HTML where clicking on a button shifts a specific section of a row from one table to another while simultaneously deleting the remaining

I am facing an issue with two tables - addFriends and existingFriends. The addFriends table contains a button in the fourth column, which, upon clicking, should delete the corresponding row from that table and add it to the existingFriends table. Currentl ...

javascripthtmlcss

Clicking on two svgs that overlap, on the other hand

Creating a web page buttons panel using .svg files has been an interesting challenge. After adjusting margins and other CSS attributes, I managed to position the buttons as seen in the code. The issue at hand: I'm facing difficulty with making both b ...

htmlcsssvg

In the absence of a value

In my code, I've implemented a functionality that saves the user's input into local storage and displays it in a specific ID. However, I want to make sure that if the input field is left empty, the user is prompted to enter their name. function ...

javascripthtml

A dynamic jQuery plugin that replicates the smooth page sliding animation found in iPhone apps

Currently, I am in search of a jQuery plugin that has the capability to navigate users to different pages on a website with a sleek sliding animation, similar to what we see in some widely used iPhone apps. Despite my best efforts to create this functional ...

iphonehtmlcssanimationjquery-plugins