How does div-sharpcontainer automatically adapt to the width of the sub-div inside and center it?

    <div id="container">
        <div id="register"></div>
        <div id="roll"></div>
        <div id="check"></div>
    </div>
The structure of

div is very simple. If you do not specify a fixed px for the sub-div, the sub-div can be written at 20%.
now there are three requirements
the width of the 1.div-sharpcontainer is the same as the width of the sub-div.
2.div-sharpcontainer is centered relative to document
3.div is 20% of document.

div-sharpcontainer{
    border:1px solid red;
    margin:0 auto;
}
div-sharpregister,div-sharproll,div-sharpcheck{
    border:1px solid black;
    width:20%;
    text-align:center;
}

the above cannot be done. Excuse me, how to write css?

Aug.17,2021

well, can this requirement be like this:

  1. div-sharpcontainer width is 20% of document and is centered
  2. div-sharpcontainer > div width is the same as div-sharpcontainer.

turn div-sharpcontainer into an inline-block element. As for its centering, adding text-align: center; to its parent element, of course, there are many other ways to center.

this is the center solution with variable width, which can be solved by display:table, flex and so on.

Menu