Fri, 2021-08-27 09:59
Hello everyone!
I'm a beginner in web programming, I created a website just for practice and I got stuck when I try to center the span elements displayed with flex as seen in the attached printscreens.
It looks better in the second printscreen when I display borders for each span element.
Do you have any idea how to do it?
<!DOCTYPE html> <html> <head> <title>Table 01</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="container"> <div class="container-menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> <div class="policy-container"> <div class="headings"> <span class="heading">Row</span> <span class="heading">First Name</span> <span class="heading">Last Name</span> <span class="heading">Email</span> </div> <div class="policy"> <span>1</span> <span>Clark</span> <span>Kent</span> <span>clarkkent@mail.com</span> </div> <div class="policy"> <span>2</span> <span>John</span> <span>Carter</span> <span>johncarter@mail.com</span> </div> <div class="policy"> <span>3</span> <span>Peter</span> <span>Parker</span> <span>peterparker@mail.com</span> </div> </div> </div> <script type="text/javascript" src="js/main.js"></script> </body> </html>
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Spartan:[email protected]&display=swap'); *{ padding: 0; margin: 0; box-sizing: border-box; } html, body{ font-family: 'Spartan', sans-serif; } .container{ position: relative; height: 100vh; width: 100vw; } .container-menu { position: relative; padding: 10px; background-color: #AED6EE; } ul { position: relative; margin-left: 30px; margin-right: 30px; text-align: right; } li { display: inline; padding: 5px; } a { font-size: 16px; font-weight: 1000; color: #334EFF; text-decoration: none; } .policy-container { position: relative; margin-top: 10px; margin-left: 45px; margin-right: 45px; margin-bottom: 0px; font-weight: 1000; } .headings { display: flex; margin: 5px; padding: 10px; font-size: 20px; text-align: center; justify-content: center; } .policy { display: flex; padding: 10px; font-size: 16px; margin-bottom: 15px; border-radius: 20px/20px; background-color: white; text-align: center; justify-content: center; box-shadow: 0 0 5px rgb(40, 71, 247); } span { flex-basis: 30%; border-style: solid; border-width: 1px; border-color: red; }
Attachment | Size |
---|---|
Screenshot (392).png | 131.3 KB |
Screenshot (393).png | 134.2 KB |