0

I have a webpage with a container DIV which contains some other DIV ('acBox' class), each with a small picture.

When the screen is wide (by example 1000 px), it's several 'acBox' per line, that's ok.

But when the screen is narrow and it's only one 'acBox' per line, I wish to center them horizontally.

The way I found is :

@media screen and (max-width: 490px) {
  .acBox {
     float:none ;
     clear:both ;
     display:table ;
     margin-left:auto ;
     margin-right:auto;
  }
}

But 'display' is 'table'. For some JavaScript reasons, I wish to keep 'block', so I can keep simple the code to hide and show some 'acBox'. I prefer not testing screen resolution, so I wish can to do :

document.getElementById( some_id ).style.display = "block";

Is it please a way to do that ?

amir
  • 49
  • 4
  • 1
    last method in this answer: https://stackoverflow.com/a/69733298/8620333 – Temani Afif Nov 27 '22 at 10:09
  • When you have displayed the div as `block` in javascript it removes the `table` property, try to change the display in javascript and set it to `table`. – Navspace Nov 27 '22 at 12:04

0 Answers0