我正在尝试在我的网站上将徽标名称和ID的标题,顶部和底部居中放置。我已经尝试过使用margin top,但它确实起作用了,但这并不是我想要的。
此外,我试图将徽标名称设为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>
使用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>