英文:
Why does my text field does net appear in the centre?
问题
I am building a website for a project at college but somehow I do not get the paragraph aligned in the centre on the top of the webpage.
我正在为大学项目建立网站，但不知何故，我无法使顶部段落居中对齐。
I tried inline, but that did not work, then I tried CSS, but it still does not work the way I want it to:
我尝试了内联方式，但没有成功，然后我尝试了CSS，但它仍然没有按我想要的方式工作：
body {
font-family: 'Roboto', sans-serif;
background-color: black;
color: white;
}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.sidebar {
position: fixed;
left: -250;
width: 250px;
height: 100%;
background: #042331;
}
.sidebar header {
font-size: 22px;
color: white;
text-align: center;
line-height: 70px;
background: #063146;
user-select: none;
}
.sidebar ul a{
display: block;
height: 100%;
width: 100%;
line-height: 65px;
font-size: 20px;
color: white;
padding-left: 40px;
box-sizing: border-box;
border-top: 1px solid rgba(255, 255, 255, .1);
border-bottom: 1px solid black;
transition: .4s;
}
ul li:hover a{
padding-left: 50px;
}
.sidebar ul a i{
margin-right: 16px;
}
.welcome1{
text-align: center;
color: white;
background-color: #063146;
}
This is the html markup:
这是HTML标记：
<!doctype html>
<html lang="eng" dir="ltr">
<head>
<meta charset="utf-8">
<title>side-menu bar</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/55138bdcbe.js" crossorigin="anonymous"></script>
</head>
<body>
<img src="sidebar1.jpg" style="height: 100px; width : 250px" alt="">
<div class="sidebar">
<header>Traning-App Navigator</header>
<ul>
<li><a hrf="homepage.html"><i class="fas fa-home"></i> Home</a></li>
<li><a hrf="project.html"><i class="fas fa-brush"></i> Project</a></li>
<li><a hrf="aboutus.html"><i class="far fa-question-circle"></i> About us</a></li>
<li><a hrf="contact.html"><i class="fas fa-envelope"></i> Contact</a></li>
</ul>
</div>
<div class="welcome1"> <p>
here you will find everything you will need for your Training such as nutriënts, schematics, advice on training exercises and alike!
so if you are ready to start your training journey... then let us guide you through it!
</p></div>
</body>
</html>
But when I save it and try to use it the code just does not seem to do what it should. Do you have any solutions to this problem?
但是当我保存并尝试使用它时，代码似乎没有按预期工作。您有解决这个问题的办法吗？
英文:
I am building a website for a project at college but somehow I do not get the paragraph aligned in the centre on the top of the webpage.
I tried inline, but that did not work, then I tried CSS, but it still does not work the way I want it to:
body {
font-family: 'Roboto', sans-serif;
background-color: black;
color: white;
}
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.sidebar {
position: fixed;
left: -250;
width: 250px;
height: 100%;
background: #042331;
}
.sidebar header {
font-size: 22px;
color: white;
text-align: center;
line-height: 70px;
background: #063146;
user-select: none;
}
.sidebar ul a{
display: block;
height: 100%;
width: 100%;
line-height: 65px;
font-size: 20px;
color: white;
padding-left: 40px;
box-sizing: border-box;
border-top: 1px solid rgba(255, 255, 255, .1);
border-bottom: 1px solid black;
transition: .4s;
}
ul li:hover a{
padding-left: 50px;
}
.sidebar ul a i{
margin-right: 16px;
}
.welcome1{
text-align: center;
color: white;
background-color: #063146;
}
This is the html markup:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.sidebar {
position: fixed;
left: -250;
width: 250px;
height: 100%;
background: #042331;
}
.sidebar header {
font-size: 22px;
color: white;
text-align: center;
line-height: 70px;
background: #063146;
user-select: none;
}
.sidebar ul a{
display: block;
height: 100%;
width: 100%;
line-height: 65px;
font-size: 20px;
color: white;
padding-left: 40px;
box-sizing: border-box;
border-top: 1px solid rgba(255, 255, 255, .1);
border-bottom: 1px solid black;
transition: .4s;
}
ul li:hover a{
padding-left: 50px;
}
.sidebar ul a i{
margin-right: 16px;
}
<!-- language: lang-html -->
<!doctype html>
<html lang="eng" dir="ltr">
<head>
<meta charset="utf-8">
<title>side-menu bar</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/55138bdcbe.js" crossorigin="anonymous"></script>
</head>
<body>
<img src="sidebar1.jpg" style="height: 100px; width : 250px" alt="">
<div class="sidebar">
<header>Traning-App Navigator</header>
<ul>
<li><a hrf="homepage.html"><i class="fas fa-home"></i> Home</a></li>
<li><a hrf="project.html"><i class="fas fa-brush"></i> Project</a></li>
<li><a hrf="aboutus.html"><i class="far fa-question-circle"></i> About us</a></li>
<li><a hrf="contact.html"><i class="fas fa-envelope"></i> Contact</a></li>
</ul>
</div>
<div class="welcome1"> <p>
here you will find everything you will need for your Training such as nutriënts, schematics, advice on training exercises and alike!
so if you are ready to start your training journey... then let us guide you through it!
</p></div>
</body>
</html>
<!-- end snippet -->
But when I save it and try to use it the code just does not seem to do what it should. Do you have any solutions to this problem?
答案1
得分: 1
Sure, here is the translated content:
<strike>If welcome1 is your paragraph you have 2 choices.
```css
display:flex;
justify-content:center;
align-items:center;
Or
display:grid;
place-items:center;
Without seeing the html, this is the best recommendation that can be given
</strike>
After review of HTML:
It can be noted that the major problem is that your side bar is set to fixed and this makes it no longer inline with the welcome div therefor the welcome div is returning to take up the whole space.
an idea fix is listed below
.sidebar{
position: fixed;
left: 0;
}
.welcome1{
width: 100%;
margin-left: 250px;
}
This minor change should give room for your div to scroll down and for text to be centered within that div and will take up 100% of the left over space post applying the margin-left.
<details>
<summary>英文:</summary>
<strike>If welcome1 is your paragraph you have 2 choices.
```css
display:flex;
justify-content:center;
align-items:center;
Or
display:grid;
place-items:center;
Without seeing the html, this is the best recommendation that can be given
</strike>
After review of HTML:
It can be noted that the major problem is that your side bar is set to fixed and this makes it no longer inline with the welcome div therefor the welcome div is returning to take up the whole space.
an idea fix is listed below
.sidebar{
position: fixed;
left: 0;
}
.welcome1{
width: 100%;
margin-left: 250px;
}
This minor change should give room for your div to scroll down and for text to be centered within that div and will take up 100% of the left over space post applying the margin-left.
答案2
得分: 0
I moved the <div> with the paragraph to the top of the code. That fixes the display order. I also added:
p {
text-align: center;
}
If you don't want the text to take up the entire width of the page though, then you can use:
p {
max-width: 500px;
margin: auto;
text-align: center;
}
英文:
I moved the <div> with the paragraph to the top of the code. That fixes the display order. I also added:
p {
text-align: center;
}
I guess you meant that by centering.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.sidebar {
position: fixed;
left: -250;
width: 250px;
height: 100%;
background: #042331;
}
.sidebar header {
font-size: 22px;
color: white;
text-align: center;
line-height: 70px;
background: #063146;
user-select: none;
}
.sidebar ul a {
display: block;
height: 100%;
width: 100%;
line-height: 65px;
font-size: 20px;
color: white;
padding-left: 40px;
box-sizing: border-box;
border-top: 1px solid rgba(255, 255, 255, .1);
border-bottom: 1px solid black;
transition: .4s;
}
ul li:hover a {
padding-left: 50px;
}
.sidebar ul a i {
margin-right: 16px;
}
p {
max-width: 500px;
margin: auto;
text-align: center;
}
<!-- language: lang-html -->
<!doctype html>
<html lang="eng" dir="ltr">
<head>
<meta charset="utf-8">
<title>side-menu bar</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/55138bdcbe.js" crossorigin="anonymous"></script>
</head>
<body>
<img src="sidebar1.jpg" style="height: 100px; width : 250px" alt="">
<div class="welcome1">
<p>
here you will find everything you will need for your Training such as nutriënts, schematics, advice on training exercises and alike! so if you are ready to start your training journey... then let us guide you through it!
</p>
</div>
<div class="sidebar">
<header>Traning-App Navigator</header>
<ul>
<li><a hrf="homepage.html"><i class="fas fa-home"></i> Home</a></li>
<li><a hrf="project.html"><i class="fas fa-brush"></i> Project</a></li>
<li><a hrf="aboutus.html"><i class="far fa-question-circle"></i> About us</a></li>
<li><a hrf="contact.html"><i class="fas fa-envelope"></i> Contact</a></li>
</ul>
</div>
</body>
</html>
<!-- end snippet -->
I you don't want the text to take up the entire width of the page though, then you can use:
p {
max-width: 500px; /* The maximal width for your text.
Don't use normal width, because if the viewport is smaller than the width you set, there will be overflow. */
margin: auto;
text-align: center;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论