css 为什么我的文本字段的中间会出现网络?

fdbelqdn  于 2023-07-01  发布在  其他
关注(0)|答案(1)|浏览(99)

我正在为大学的一个项目建立一个网站,但不知何故,我没有得到网页顶部中心对齐的段落。
我尝试了内联,但不起作用,然后我尝试了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;
}

这是HTML标记:

.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;
}
<!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>

但是当我保存它并尝试使用它时,代码似乎没有做它应该做的事情。对于这个问题你有什么解决办法吗?

iecba09b

iecba09b1#

如果welcome1是你的段落,你有两个选择。

display:flex;
justify-content:center;
align-items:center;

或者

display:grid;
place-items:center;

在没有看到html的情况下,这是可以给出的最佳推荐

相关问题