Struggling to align the div horizontally using text-align?

I need to make the div align horizontally.

.d1 {
  margin-left: 1rem;
  margin-right: 1rem;
  font-size: 0;
  text-align: justify;
}

.d1::after {
  content: '';
  font-size: 0;
  line-height: 0;
  height: 0;
  width: 100%;
  display: inline-block;
}

.dd {
  display: inline-block;
  position: relative;
  font-size: initial;
}
<div class="d1">
  <div class="dd">aa</div>
  <div class="dd">bb</div>
</div>

however, the justification of the div is not working and it remains left-aligned. Why is this happening?

htmlcss

Answer №1

If you want to adjust the alignment of the divs along the horizontal axis, please specify your preferences. Currently, I have positioned them next to each other on the left side.

<div class="d1">
  <div class="dd">aa</div>
  <div class="dd">bb</div>
</div>

.d1 {
 display: flex;
}
.dd{
  margin: 1rem; //creating space between elements
}

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 update just the image path in the source using jQuery?

I am currently working on implementing a dark mode function for my website, and I have successfully adjusted the divs and other elements. However, I am facing an issue with changing the paths of images. In order to enable dark mode, I have created two sep ...

javascripthtmljquerycss

Ways to apply Position Fixed to a particular Div element and subsequently eliminate that class while scrolling

Check out my current Jsfiddle project here I am working on a task that involves adding a class to a specific div when scrolling and then removing that class. Below is the JavaScript code I have written for this functionality: var targetDiv = $(".mainwra ...

javascriptjquerycssscrollfixed

Extracting user-defined HTML attributes containing hyphens using the HTML DOM parser

Take for instance: $html = "<div title='test a' class='a' classes='testing custom attribute with -' >test a</div> <div title='test b' class='b' >test b</div> < ...

phphtmlsimple-html-domuser-defined

Extract information from an external HTML table and store it in an array

I am looking for a way to extract data from an HTML table on an external site and save it as a JSON file for further manipulation. Is there a method to retrieve table data from an external HTML site that differs from the code example provided? Additional ...

javascripthtmlarraysjsonhtml-table

Discover the basics of incorporating libraries using npm

As a beginner in JavaScript, I am looking to incorporate moment.js or another library into my project. However, I am unsure of how to properly set up my project so that I can import from the library. Here is how I have structured my HTML: <!DOCTYPE html ...

javascripthtmlshared-libraries

What is the proper syntax for using .focus() with the nextElementSibling method in typing?

As I strive to programmatically shift focus in my form using nextElementSibling, I encounter a challenge with typing variables/constants due to working with Typescript... I have managed to achieve success without typing by implementing the following: myF ...

javascripthtmltypescripttypeselement

Tips to avoid the page from scrolling to the top when the menu is opened

Whenever a user taps the menu button on the page, a full-page menu opens. However, there is an issue - the main content page automatically scrolls to the top. Can you provide suggestions on how to prevent this from happening? I have already looked into a s ...

javascripthtmlcss

AngularJS | Using ngAnimate to Display Form Validation Errors

My form errors are currently being displayed successfully using CSS and conditional classes, but I recently discovered ng-message and ng-animate. Would it be possible to use ng-message to contain the error messages? Also, I have been unable to find any tu ...

htmlcssangularjsng-animate

Display the chosen alternative in a Bootstrap dropdown menu

I am currently facing an issue with the dropdown list in my bootstrap menu. <li class="dropdown"> <a aria-expanded="false" aria-haspopup="true" role="button" data-toggle="dropdown" class="dropdown-toggle" href="#">Chose option<span class="c ...

javascriptjqueryhtmlcsstwitter-bootstrap

tag-swapping function

I have a specific HTML code paragraph that I am working with: <p id=tag1> html statements before click </p> My goal is to create a function that will split the paragraph into two separate paragraphs like so : <p id=tag1> html statement ...

javascriptjqueryhtml

Consistently directing to a single page on the Node Js web server

I'm in the process of creating a website with multiple HTML pages. Currently, I have code that successfully links to the login page, but unfortunately, the localstores page also directs to the login page. const express = require('express') ...

javascripthtmlnode.jsexpress

Modify the color of the lower border and dropdown indicator in Material UI's Autocomplete feature

https://i.stack.imgur.com/oXKQm.png I'm struggling to figure out how to change the color of the line underneath 'Search' and the arrow on the right to white. I've tried applying styles to the .MuiAutocomplete-root css class, but it did ...

cssreactjsmaterial-ui

The element is being hidden by the Bootstrap visibility utility even though it should be visible

On smaller screen sizes, I want to hide the "Updated: " text and only display the date, which is currently working correctly. However, the issue arises on larger screen sizes where it hides the date and only shows the "Updated: " part in the span. .u-da ...

htmltwitter-bootstrapbootstrap-4

I'm having trouble figuring out how to perfectly center this div on all types of devices

As someone who is new to css, I have been struggling to center these divs in the middle of the page across all devices despite searching extensively online and trying various solutions without any success. Check out my code below: Snippet: :after, :be ...

htmlcss

extracting sub tag information from an HTML element

Below is a snippet of code that I am working with: <ul id="menu"> <li id = 1><a href="http://google.com" >Link</a></li> <li id = 2><a href="http://http://stackoverflow.com/ ...

javascripthtml

What is the best way to create dynamic cards like the ones displayed here?

I am experiencing an issue with the black box displaying the date. I created it, but it does not adjust properly to different screen sizes. .date { width: 20%; height: 15%; background-color: black; z-index: 1; position: absolute; top: 45%; ...

htmlcssbootstrap-4

What's the best way to enable touch scrolling for items within a div container?

I am in the process of creating a code snippet that will allow users to scroll through items within a div, similar to a spinning wheel or slot machine. While I am aware of an existing solution for iPhone and iPod, I want to develop a simpler, more streamli ...

javascriptjqueryhtmlcss

Arranging cards in a stack using VueJS

I am currently working with a small vue snippet. Originally, I had v-for and v-if conditions in the snippet, but due to issues reading the array, it is now hardcoded. The current setup produces three cards stacked on top of each other. I am exploring opti ...

javascripthtmlcssvue.js

Generate random positions for several divs using jQuery

Here is my code snippet: http://jsfiddle.net/BREvn/2/ (it's functional). However, I want each div to have a unique position coordinate. Currently, the script moves others to the place of the first one. How can I resolve this issue? I attempted using a ...

javascriptjqueryhtmlpositioneach

Where could one possibly find the destination of the mysterious <circle>?

I want to implement a simple pulsating animation on a circle svg element. I attempted using a transform: scale(..,..) animation, but it seems to be shifting the entire circle within its container instead of just scaling the element itself. This is the cur ...

csssvgcss-animations