Search code examples
htmlcssinline-styles

trying to center divs within another div using inline css

I have an assignment for class (I know inline CSS isn't standard practice) in which he wants us to specifically use inline css in order to have a div box containing three other boxes that are centred horizontally. When I try to do it, no matter what I try, the formatting ends up odd, and I can't make them show up horizontally next to each other.

Here's what I tried:

Here's what it looks like, sorry for the badly scribbled out personal information.

Solution

  • Not sure if I understand the assignment very well, but I came up this:

      <h2>Using Float</h2>
  <div style="background-color: pink; padding: 20px; text-align: center; display: flow-root">
    <div style="background-color: aquamarine; margin-right: 20px; width: calc((100% - 40px) / 3); height: auto; float: left;"><p>Lorem, ipsum dolor.</p></div>
    <div style="background-color: aquamarine; margin-right: 20px; width: calc((100% - 40px) / 3); height: auto; float: left;"><p>Lorem, ipsum dolor.</p></div>
    <div style="background-color: aquamarine; margin-right: 0px; width: calc((100% - 40px) / 3); height: auto; float: left;"><p>Lorem, ipsum dolor.</p></div>
  </div>
  <h2>Using Flex</h2>
  <div style="background-color: pink; padding: 20px; text-align: center; display: flex; gap: 20px;">
    <div style="background-color: aquamarine; flex-grow: 1;"><p>Lorem, ipsum dolor.</p></div>
    <div style="background-color: aquamarine; flex-grow: 1;"><p>Lorem, ipsum dolor.</p></div>
    <div style="background-color: aquamarine; flex-grow: 1;"><p>Lorem, ipsum dolor.</p></div>
  </div>
  <h2>Using Grid</h2>
  <div style="background-color: pink; padding: 20px; text-align: center; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;">
    <div style="background-color: aquamarine;"><p>Lorem, ipsum dolor.</p></div>
    <div style="background-color: aquamarine;"><p>Lorem, ipsum dolor.</p></div>
    <div style="background-color: aquamarine;"><p>Lorem, ipsum dolor.</p></div>
  </div>

    In the Float example I use width: calc((100% - 40px) / 3) instead of width: 33% in order to eliminate the margin-right of the child divs (20px + 20px + 0 = 40px). If that makes sense...
    I also use display: flow-root on the container div, which is the easiest and safest way to create a block formatting context.

    Hope it helps.