简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
How to position the website box on the right
P粉953231781
P粉953231781 2023-08-14 19:16:04
0
1
637
<p>I'm having a problem here, I'm trying to put a box on the right side of the website but don't know why it's not working, I'm trying to use <code>justify-content: flex-end;< /code>Align the box to the "end" of the page, then add <code>padding-right</code> to <code>200px</code>, but alas this doesn't work. Any help with explanation would be greatly appreciated.</p> <p><br /></p> <pre class="brush:css;toolbar:false;">* { margin: 0; padding: 0; box-sizing: border-box; } .container { width: 100%; height: 50vh; background-color: #1f2937; position: static; display: flex; flex-direction: column; justify-content: center; } .footer { position: absolute; bottom: 0px; width: 100%; height: 10vh; background-color: #1f2937; color: white; text-align: center; display: flex; justify-content: center; align-items: center; } .logo { font-size: 24px; font-family: 'Times New Roman', Times, serif; color: white; justify-content: space-between; padding-top: 15px; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; padding-left: 200px; position: absolute; top: 0; } .navbar { color:white; font-size: 18px; position: fixed; width: 85%; top: 0; right: 0; margin: auto; display: flex; align-items: center; justify-content: flex-end; flex-direction: row; padding-top: 15px; padding-right: 200px; } .navbar ul li { list-style: none; display: inline-block; margin: 0 20px; text-decoration: none; } .text1 { position: relative; color: white; padding-left: 200px; font-size: 48px; font-weight: bold; width: 720px; } .text2{ color: white; font-size: 18px; padding-left: 200px; width: 520px; } .text3{ text-align: center; display:flex; align-items:center; /*vertical center*/ justify-content:right; /*horizontal center*/ width: 500px; height:350px; background-color: grey; } </pre> <pre class="brush:html;toolbar:false;"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Website</title> <link href="style.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="logo"> <h2>Header Logo</h2> </div> <div class="navbar"> <ul> <li><a href="index.html">header link one</a></li> <li><a href="index.html">header link two</a></li> <li><a href="index.html">header link three</a></li> </ul> </div> <div class="text1"> <h2>This website is awesome</h2> </div> <div class="text2">This website has some subtext that goes here under the main title.It's a smaller font and the color is lower contrast</div> <div class="text3">this is a placeholder for an image</div> </div> <div class="footer"> Copyright © The Odin Project 2023 </div> </body> </html></pre> <p><br /></p> <p>I tried using justify-content:flex-end to align it but I'm at my wits end, to be honest an explanation of my problem would be very helpful, I only included the necessary CSS code and the whole HTML file . Thanks in advance for all your help! </p>
P粉953231781
P粉953231781

reply all(1)
P粉373990857
P粉3739908572023-08-15 18:21:28 1 floor

First, you use the flex property, although you haven't set display:flex;

Secondly, to make a div move to the right (such as a box): (indent as needed) 

.container{
display:flex;
align-items:center; /*垂直居中*/
justify-content:right; /*水平居中*/
}```
#text{
display:block;
}
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！