我正在自己学校上的一堂课上建立自己的网站。我必须设计自己想要的网站外观,现在必须构建它。
我找到了我非常喜欢的样式表“ Roboto Slab”,并且有背景。实际上,我已经完成了大部分主页。
尝试格式化文本时,我一直遇到此错误。我正在尝试使文本位于网页的确切中心,但比中心稍低。不仅如此,它还提供了向左和向右滚动的选项,而且我没有理由看到这样做。
这是该站点的代码。
<html>
<head>
<title>MySite</title>
<meta name="description" content="My Site.">
<link rel="stylesheet" href="core.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>html,body,.do-you-even-flexbox{
height:100%;
} body {
margin:0;
font:normal 14px/1.2 "Roboto", Helvetica, Arial, sans-serif;
text-align:center;
background:#111 url('http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Alpamayo.jpg/1280px-Alpamayo.jpg') center top/ cover;
}::-moz-selection {
background:#2fdd11;
color:#fff;
}::selection {
background:#2fdd11;
color:#fff;
} a {
text-decoration:none;
}a:hover, a:active{
outline:none;
text-decoration:underline;
}a:focus {
outline:thin dotted;
}.do-you-even-flexbox,.container {
position:absolute;
top:50%;
width:100%;
height:1em;
margin-top: -.5em;
}.container {
padding:8px 20px 15px;
}h1, h2 {
font-family:"Roboto Slab",Helvetica,Arial,sans-serif;
margin:0;
color:#000;
font-weight:400;
font-size:96px;
}.social{
margin-top:30px;
}.social a {
background-color:#F5F7FA;
border-radius:35px;
margin:0 3px;
width:26px;
height:26px;
padding:16px;
display:inline-block;
-webkit-transition:background-color .6s ease;
transition:background-color .6s ease;
}.social a:hover,.social a:focus {
outline:none;
background-color:#FC6E51;
}.icon{
width:26px;
height:26px;
}.icon>path{
fill:#111;
}.links{
color:#333;
margin-top:30px;
}.links a{
display:inline-block;
padding:0 5px;
color:#000;
}.links {
color:#000;
}.links a:hover{
color:#000;
} @media (max-width: 660px) {
h1{
font-size:64px;
}h2 {
font-size:24px;
}
} @media (max-width: 460px) {
.do-you-even-flexbox {
display:none;
}.container{
margin:0 auto;
margin-top:4%;
}.links a{
display:block;
}h1{
font-size:48px;
}h2{
font-size:16px;
}
} @media (max-width: 350px) {
h1{
font-size:40px;
}
}
</style>;
</head>
<body>
<i class="do-you-even-flexbox"></i>
<div class="container">
<h1>Hi.</h1>
<h2>This is the website for my independent study.</h2>
<div class="links">
<a href="some_page_here">Example Page.</a>
<a href="some_page_here">Another Page.</a>
<a href="some_page_here">Another page! :D</a>
<a href="derp">Blah blah</a>
</div>
</div>
</body>
</html>
我在做什么错呢?我已经尝试过使用align:center方法,但是这些方法都不适合我。
!!编辑!
修复了字体大小问题。是的,我。刚刚在H2的CSS代码中创建了一个新部分。
最佳答案
您需要为该中心内容添加一个div,请参见html
<i class="do-you-even-flexbox"></i>
<div class="container">
<div class="box">
<h1>Hi.</h1>
<h2>This is the website for my independent study.</h2>
</div>
</div>
<div class="links"> <a href="some_page_here">Example Page.</a>
<a href="some_page_here">Another Page.</a>
<a href="some_page_here">Another page! :D</a>
<a href="derp">Blah blah</a>
</div>
那么您可以使用flex-box模型将div(我称其为“ box”)与CSS居中
html, body, .do-you-even-flexbox {
height:100%;
width:100%;
overflow-x:hidden;
}
body {
margin:0;
font:normal 14px/1.2"Roboto", Helvetica, Arial, sans-serif;
text-align:center;
background:#111 url('http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Alpamayo.jpg/1280px-Alpamayo.jpg') center top/ cover;
}
::-moz-selection {
background:#2fdd11;
color:#fff;
}
::selection {
background:#2fdd11;
color:#fff;
}
a {
text-decoration:none;
}
a:hover, a:active {
outline:none;
text-decoration:underline;
}
a:focus {
outline:thin dotted;
}
.do-you-even-flexbox, .container {
position:relative;
top:0;
width:100%;
height:100%;
}
.container {
padding:8px 20px 15px;
display:flex;
align-content:center;
}
.box {
height:20%;
margin:auto
}
h1, h2 {
font-family:"Roboto Slab", Helvetica, Arial, sans-serif;
margin:0;
color:#000;
font-weight:400;
font-size:24px;
}
.social {
margin-top:30px;
}
.social a {
background-color:#F5F7FA;
border-radius:35px;
margin:0 3px;
width:26px;
height:26px;
padding:16px;
display:inline-block;
-webkit-transition:background-color .6s ease;
transition:background-color .6s ease;
}
.social a:hover, .social a:focus {
outline:none;
background-color:#FC6E51;
}
.icon {
width:26px;
height:26px;
}
.icon>path {
fill:#111;
}
.links {
color:#333;
margin-top:30px;
}
.links a {
display:inline-block;
padding:0 5px;
color:#000;
}
.links {
color:#000;
}
.links a:hover {
color:#000;
}
@media (max-width: 660px) {
h1 {
font-size:64px;
}
h2 {
font-size:24px;
}
}
@media (max-width: 460px) {
.do-you-even-flexbox {
display:none;
}
.container {
margin:0 auto;
margin-top:4%;
}
.links a {
display:block;
}
h1 {
font-size:48px;
}
h2 {
font-size:16px;
}
}
@media (max-width: 350px) {
h1 {
font-size:40px;
}
}
我使标题标签变小了,以便您可以看到效果,但是您需要根据需要进行调整,并且可能需要调整盒子的高度,但是您会明白的。 See fiddle here
关于html - 格式化文本,使其位于页面的确切中心,并具有正确的大小。[HTML/CSS],我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25574169/