Using the following, clicking the "Try Me" button aligns the DIV contents to the right:
function myFunction() {
const divs = document.getElementsByClassName("outer_div");
for (let i = 0; i < divs.length; i++) {
let loop_div = divs.item(i);
loop_div.style.textAlign = "right";
}
}.outer_div {
margin:0px;
text-align: center;
justify-content: center;
align-items: center;
}<div class="outer_div" style="background: white;">
Test One
</div>
<div class="outer_div" style="background: white;">
Test Two
</div>
<div class="outer_div" style="background: white;">
Test Three
</div>
<hr>
<button onclick="myFunction()">Try it</button>The issue I’d like to fix is that if the CSS for the outer_div contains this:
display: flex;
That stops the right-align functionality of the button from working.
Example here:
function myFunction() {
const divs = document.getElementsByClassName("outer_div");
for (let i = 0; i < divs.length; i++) {
let loop_div = divs.item(i);
loop_div.style.textAlign = "right";
}
}.outer_div {
margin:0px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}<div class="outer_div" style="background: white;">
Test One
</div>
<div class="outer_div" style="background: white;">
Test Two
</div>
<div class="outer_div" style="background: white;">
Test Three
</div>
<hr>
<button onclick="myFunction()">Try it</button>Is there any way round that?
Sorry for all of the rules I have probably broken by asking this question.
Thanks
>Solution :
You need to use justify-content
For example:
function myFunction() {
const divs = document.getElementsByClassName("outer_div");
for (let i = 0; i < divs.length; i++) {
let loop_div = divs.item(i);
loop_div.style.justifyContent = "flex-end";
}
}.outer_div {
margin:0px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}<div class="outer_div" style="background: white;">
Test One
</div>
<div class="outer_div" style="background: white;">
Test Two
</div>
<div class="outer_div" style="background: white;">
Test Three
</div>
<hr>
<button onclick="myFunction()">Try it</button>