CSS 在中间并排对齐两个 DIV

Question

Dears Greeting,,

I want to Align two Divs side by side in the middle using HTML.

I really hope I can find the solution. I attached the code below the final result should look like the attached image

many thanks & best regards

 .circle { width: 300px; height: 300px; line-height: 300px; border-radius: 50%; margin: 50px; outline: solid 1px black; display: flex; justify-content: center; align-items: center; font-size: 30px; color: #fff; text-align: center; vertical-align: middle; position: relative; box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black; display: inline-block; margin: 5%; background: white }

 <div class="circle"><a href="https://www.w.com/">1</a></div> <div class="circle"><a href="https://www.w.com/">2</a></div>

Answer 1

The code snippet which you have shared has two different <div> for each element and your CSS also does not have .margin or .width proportion to match the center of the page.

You can add parent wrapper <div> around your both circle <div> elements.

See if this snippet works for you:

 .circle { width: 300px; height: 300px; line-height: 300px; border-radius: 50%; margin: 50px; outline: solid 1px black; display: flex; justify-content: center; align-items: center; font-size: 30px; color: #fff; text-align: center; vertical-align: middle; position: relative; box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black; display: inline-block; margin: 5%; background: white }

 <div style="text-align:center;"> <div class="circle"><a href="https://www.w.com/">1</a></div> <div class="circle"><a href="https://www.w.com/">2</a></div> </div>