Использование style.textAlign не работает, если класс DIV содержит объявление «отображение» ⇐ CSS

[Anonymous]

При нажатии кнопки «Попробовать» содержимое DIV выравнивается по правому краю:

Код: Выделить всё

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;
}

Код: Выделить всё

Test One

Test Two

Test Three



Try it

Проблема, которую я хотел бы исправить, заключается в том, что если CSS для external_div содержит следующее:

Код: Выделить всё

display: flex;

Это останавливает работу функции выравнивания кнопки по правому краю.
Пример здесь:
< div class="snippet">

Код: Выделить всё

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;
}

Код: Выделить всё

Test One

Test Two

Test Three



Try it

Есть ли способ обойти это?
Извините за все правила, которые я, вероятно, нарушил, задав этот вопрос.
Спасибо

Подробнее здесь: https://stackoverflow.com/questions/786 ... declaratio