我已经开始制作一个基本的作品集页面,我从一个简单的标题开始,我想要将其放置在页面空白区域的顶部中心,但它似乎是隐藏的或根本不存在。有人能看到我做错了什么吗?网站链接:http://me14ch.leedsnewmedia.net/portfolio/portfolio.html
这是我关注的 HTML 位:
<div class="header"><h1>Portfolio</h1></div>
整个网站的 CSS 是:
* {
margin:0;
border:0;
padding:0;
}
body {
height: 100%;
width: 100%;
overflow: hidden;
}
.navigation li {
display: inline;
}
a {
color: grey;
text-decoration: inherit;
}
a:hover{
color: black;
}
.current {
font-weight:normal;
margin-bottom:5px;
border-bottom: 2px solid;
display: table;
}
.wrapper {
margin-left: 0 auto;
margin-right:0 auto;
margin-top: 15%;
margin-bottom: 10%;
text-align:center;
}
h1 {
font-family:"Kaushan Script";
font-size: 4em;
color:#FADBC8 ;
}
h2 {
font-size: 1em;
text-transform:uppercase;
text-decoration: none;
letter-spacing: 0.2em;
text-decoration: none;
font-family: "Poiret One";
}
#header {
text-align:center;
width: 80%;
float: left;
background-color: black;
}
.photo img {
width: 12%;
height: 12%;
border-radius:50%;
border: 3px solid #FADBC8;
margin-top:30px;
}
#sidebar {
float: left;
margin-right: 5px;
font-family: "Poiret One";
text-transform: uppercase;
letter-spacing: 0.25em;
height: 100%;
width: 20%;
text-align: left;
position: fixed;
background: #F9DBC8;
}
#sidebar li {
list-style-type: none;
color: white;
margin-top: 10%;
margin-bottom: 10%;
margin-left: 10px;
padding: 0;
}
/* drop down menu */
#sidebar ul {
list-style-type:none;
position: relative;
width: 50%;
z-index: 2;
margin-top: 70%;
}
#sidebar ul li ul {
margin: 0;
}
#sidebar ul ul {
display: none;
}
#sidebar ul li:hover > ul {
display: block;
}
.social-sidebar-buttons {
float: right;
width: 3%;
margin-top: 31%;
margin-right: 2%;
}
最佳答案
在你的CSS中,你有'header'作为id而不是类,使用点符号表示类
.header {
text-align:center;
width: 80%;
float: left;
background-color: black;
}
添加 margin:auto;
将使 div 居中。它会自动在两侧提供均匀的间距。
关于html - 为什么我的正文中没有显示任何基本的 html 内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30219651/