July 2, 20206 yr i make two div div named by sidebar and layout into container div named by container i make flex box to the container to make the sidebar in left side and the layout in right side .. and that's well done but the problem that the this flex box effect on any element into the layout div ( when make centering don't work until i remove the flex box <!DOCTYPE html> <html> <meta charset="UTF-8"> <head> <title>snapshot</title> <link rel="stylesheet" href="snapshot.css"> <script src="https://kit.fontawesome.com/11e8366046.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="Normalise.css"> </head> <body> <div class="container"> <div class="sidebar"> <nav> <ul> <li><a href="#"></a><i class="fas fa-home"></i></li> <li><a href="#"></a><i class="fas fa-camera-retro"></i></li> <li><a href="#"></a><i class="fas fa-file-alt"></i></li> </ul> </nav> </div> <div class="layout"> <header> <div class="head"><h1>Hey, I'm Snapshot</h1></div> <div class="para"><p>A fully responsive gallery template by TEMPLATED</p></div> <div class="bu"><button>Continue</button></div> </header> <section class="one"> <div class="sent"> <h2>What's New</h2> </div> <div class="images"> <img src="images/fulls/01.jpg" alt=""> <img src="images/fulls/02.jpg" alt=""> <img src="images/fulls/03.jpg" alt=""> <img src="images/fulls/04.jpg" alt=""> <img src="images/fulls/05.jpg" alt=""> <img src="images/fulls/06.jpg" alt=""> </div> <div class="butt"> <button>Full Gallery</button> </div> </section> <section class="two"> <section class="frist"> <h2>About Me</h2> <p>Mus sed interdum nunc dictum rutrum scelerisque erat a parturient condimentum potenti dapibus vestibulum condimentum per tristique porta. Torquent a ut consectetur a vel ullamcorper a commodo a mattis ipsum class quam sed eros vestibulum quisque a eu nulla scelerisque a elementum vestibulum.</p> <p>Aliquet dolor ultricies sem rhoncus dolor ullamcorper pharetra dis condimentum ullamcorper rutrum vehicula id nisi vel aptent orci litora hendrerit penatibus erat ad sit. In a semper velit eleifend a viverra adipiscing a phasellus urna praesent parturient integer ultrices montes parturient suscipit posuere quis aenean. Parturient euismod ultricies commodo arcu elementum suspendisse id dictumst at ut vestibulum conubia quisque a himenaeos dictum proin dis purus integer mollis parturient eros scelerisque dis libero parturient magnis.</p> <h2>Follow Me </h2> <div class="icons"> <i class="fab fa-twitter"></i> <i class="fab fa-facebook-f"></i> <i class="fab fa-instagram"></i> </div> </section> <section class="second"> <h2></h2> <label for="Name">Name</label> <input type="Name"> <label for="Email">Email</label> <input type="Email"> <label for="Message">Message</label> <textarea name="Message" id="" cols="30" rows="10"></textarea> <button>Send Message</button> </section> </section> <footer> <div class="copyright"> <span>©Untitled. All rights reserved. Images Unsplash Design TEMPLATED</span> </div> </footer> </div> </div> </body> </html> * { margin: 0; padding: 0; box-sizing: border-box; } .container { display: flex; } .sidebar { background-color:#0D1217; padding: 30px 15px 15px 15px ; } .sidebar ul { list-style: none; } .sidebar ul li a { text-decoration: none; } .sidebar ul li:nth-of-type(1) { padding-bottom: 30px; font-size: 22px; color: rgb(25, 181, 254); } .sidebar ul li { padding-bottom: 30px; font-size: 22px; color: gray; } header{ height: 300px; background: url(images/banner.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; overflow: hidden; display: flex; flex-direction: column; justify-content: center; } header .head { grid-area: h; } header .para { grid-area: p; } header .bu { grid-area: b; } .one { background-color: goldenrod; } .two { background-color: hotpink; } .frist { background-color: #eee; } .second { background-color: #0c3; } footer { background-color: indigo; }
July 2, 20206 yr If you'd like to center things in the layout section, simply add .layout { text-align: center; } to the style sheet. This will work alongside the flexbox.
August 30, 20205 yr whichever element you want to center inside a container simply you need to make that container display flex and if you want to align any item center horizontally.. just need to say justify-content:center and if you need to center vertically align-items:center and if you need absolute center need to use both justify-content:center and align-items:center <div class="container"> <h1>Some text</h1> </div> <div class="container2"> <h1>Some text</h1> </div> <div class="container3"> <h1>Some text</h1> </div> .container{ height:500px; background:#efefef; display:flex; width:40%; margin:10px auto; justify-content:center; } .container2{ height:500px; background:#efefef; display:flex; width:40%; margin:10px auto; align-items:center; } .container3{ height:500px; background:#efefef; display:flex; width:40%; margin:10px auto; justify-content:center; align-items:center; } Edited August 30, 20205 yr by sash_oo7
Create an account or sign in to comment