+ 2

align buttons on webpage

please can somebody help me align the three big buttons together in center bottom of page, tried everything with margins and padding, dont know how to fix it! they were perfectly aligned before i added the two asides. please help i want them next to eachother horizontally. html: <!DOCTYPE html> <!DOCTYPE html> <html> <header> <img src="green-bmwwebsite-header.jpg" alt="car website header"> </header> <head> <link rel="stylesheet" href="style.css"></head> <body> <h1>Carpool</h1> <h2>Hej Namn!</h2> <aside class="aside-left" style="display:flex;"> <button> <h4>Log In</h4><br> </button> </aside> <aside class="aside-right" style="display: flexbox;"> <button> <h4>Redigera Profil</h4><br> </button> </aside> <div class="button-left"> <button><h2>Bokningar </h2> <br> <p>Här hittar du alla dina bokningar <br><br> Ändra/Avboka resa?</p> <br><br><br></button></div> </div> </body> <div class= "button-middle"> <button><h2>Mitt Konto</h2> <br> <p>Här hittar du dina inställningar och favoriter</p> <br><br><br><br><br> </button></div> <div class="button-right"> <button><h2>Kundservice </h2> <br> <p>Kontakta oss här. <br><br> Här kan du även anmäla skador.</p> <br> <br> <br> </button></div> </html> css in comments

html css positioning position buttons styling

14th Apr 2022, 12:25 PM

Maria Milner

4 Answers

+ 2

https://www.sololearn.com/post/75089/?ref=app

14th Apr 2022, 12:59 PM

MATOVU CALEB

+ 1

Hello Maria, Save your code as new Web code bit, and save it (important). If you're using SoloLearn web, then copy the code bit link from browser's address bar. If you're using SoloLearn mobile app then tap on Share button, and choose "Copy to clipboard" Edit the main post above, and paste the link inside the post's Description. If all goes well, you should see a link there. Code review using code bit is more comfortable because we can refer to line numbers for errors, which isn't possible with raw text snippets : )

14th Apr 2022, 1:34 PM

Ipang

CSS: body { margin: 0%; padding: 0%; text-align: center; font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; background-color: rgb(226, 236, 236); } h1 {color: rgb(242, 247, 245); font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 90px; margin: 5px; text-shadow: 10px 5px 25px rgb(125, 177, 173); } h2 {color: rgb(83, 124, 121);} p { font-size: small; font-weight: bold; } .aside-left { width: 40%; margin-left: 20px; float: left; } .aside-right { position: absolute; width: 40%; margin-left: 920px; float: right; } button { display: inline-block; flex-direction: column; align-items: center; padding: 2%; margin: 1%; background-color: rgb(217, 226, 226); border: none; border-radius: 20px; color: rgb(37, 76, 63); } .button-left { margin: 0 auto; display: block; height: auto; width: 20%; float: left; } .button-middle { margin: 0 auto; display: block; height: auto; width: 20%; } .button-right { margin: 0 auto; display: block; height: auto; width: 20%; } button :hover{ transition-duration: 0.4s; background-color: #f3f4f4; /* lighter */ color: rgb(75, 184, 173); box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); }

14th Apr 2022, 12:58 PM

Maria Milner

@matovu caleb, page not found?

14th Apr 2022, 1:09 PM

Maria Milner