我正在试验一些 HTML/CSS。我正在定位一个 h5,但它不起作用。当我定位它时,顶部的栏会向下移动。它应该与其容器的顶部齐平。这是我的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Hello world!</title>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
<script src="js/site.js"></script>
</head>
<body>
<!-- window wrapper -->
<div id="wrapper">
<!-- top bar -->
<div id="top_bar">
<!-- title -->
<h6 class="title">Hello</h6>
</div>
</div>
</body>
</html>
现在是 CSS。
body {
font-family: "Helvetica Neue";
background: url("http://media.idownloadblog.com/wp-content/uploads/2014/06/Yosemite-Preview.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}
#wrapper {
height: 500px;
width: 1000px;
border: 1px solid black;
border-radius: 5px;
box-shadow: 5px 5px 10px gray;
}
#top_bar {
background: linear-gradient(rgba(220,220,220,0.8),rgba(225,225,225,0.8),rgba(215,215,215,0.8));
margin-top: 0px;
height: 50px;
width: 100%;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom: 1px solid black;
}
.title {
text-align: center;
}
所以请大家帮忙,我不知道出了什么问题。
附言不要介意背景图片。
最佳答案
尝试使用这个:
.title {
text-align: center;
margin-top:0px;
}
关于css - 为什么文本不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24420489/