How to more correctly move the wrapper so that ch2 would always be in the center of the page? ch1 and ch3 contain text that can be changed ch2 picture

visualization

The first option that came to mind was to read the position of ch2 using a script and shift the wrapper relative to these values.

  • Is the width ch2 known? - Yuri
  • Yes, 180px, but for tablets it can decrease. - Andrii
  • What kind of pills? - Yuri
  • For all tablets, this option will be used with permission from 768 px or 900 px. - Andrii
  • Then it is better by the script - Yuri

1 answer 1

Here is an example implementation on css. For tablets, you reduce the width of the block-wrapper block and, accordingly, left for block-3 and right for block-1

#block-wrapper{ width: 180px; position: relative; margin: auto; } #block-1{ position: absolute; width: 220px; height: 30px; top: 0; right: 190px; background: red; } #block-2{ height: 30px; background: red; } #block-3{ position: absolute; width: 120px; height: 30px; top: 0; left: 190px; background: red; } 
 <div id="block-wrapper"> <div id="block-1"></div> <div id="block-2"></div> <div id="block-3"></div> </div>