我网站标题中的徽标名称正在通过

问题描述 投票:-1回答:1

我正在尝试在我的网站上将徽标名称和ID的标题,顶部和底部居中放置。我已经尝试过使用margin top,但它确实起作用了,但这并不是我想要的。

Desired output

此外,我试图将徽标名称设为href以链接到首页/首页。

代码段:

body {
    background: #ebe7e7;
}

@font-face {
    font-family: liant;
    src: url(liant_regular-webfont.woff);

}
#lineup {
    background-color: rgb(73, 35, 35);
    width: 100%;
    height: 5px;
    position:fixed;
    left: 0px; right: 0px; top: 0px;
}

#head {
    background-color: #cccccc;
    color: rgb(141, 68, 40);    
    width: 100%;
    height: 60px;
    position: fixed;
    left: 0px; right: 0px; top: 5px;
}

#logotxt {
    text-align: center;
    font-family: liant;
    font-size: 40px;
    font-weight: 800;
   
}

#linedown {
    background-color: rgb(73, 35, 35);
    width: 100%;
    height: 5px;
    position:fixed;
    left: 0px; right: 0px; top: 65px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Viveka Yoga</title>
    <link rel="stylesheet" href="yoga.css">
</head>
<body>
    <div id ="lineup"></div>
    <div id="head">
        <p id="logotxt">Viveka Yoga</p>
    </div>
    <div id="linedown"></div>
    <script src="yoga.js"></script>
</body>
</html>
html css
1个回答
0
投票

使用flexbox。

查看#head的样式

body {
    background: #ebe7e7;
}

@font-face {
    font-family: liant;
    src: url(liant_regular-webfont.woff);

}
#lineup {
    background-color: rgb(73, 35, 35);
    width: 100%;
    height: 5px;
    position:fixed;
    left: 0px; right: 0px; top: 0px;
}

#head {
    background-color: #cccccc;  
    width: 100%;
    height: 60px;
    position: fixed;
    left: 0px; right: 0px; top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#logotxt {
    text-align: center;
    font-family: liant;
    font-size: 40px;
    font-weight: 800;
    text-decoration: none;
    color: rgb(141, 68, 40);  
}

#linedown {
    background-color: rgb(73, 35, 35);
    width: 100%;
    height: 5px;
    position:fixed;
    left: 0px; right: 0px; top: 65px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Viveka Yoga</title>
    <link rel="stylesheet" href="yoga.css">
</head>
<body>
    <div id ="lineup"></div>
    <div id="head">
        <a href="/" id="logotxt">Viveka Yoga</a>
    </div>
    <div id="linedown"></div>
    <script src="yoga.js"></script>
</body>
</html>
© www.soinside.com 2019 - 2024. All rights reserved.