设置文本格式，使其位于页面的正中央，并且大小正确。。[HTML/CSS]_Html_Css_Web

设置文本格式，使其位于页面的正中央，并且大小正确。。[HTML/CSS]

html css web

设置文本格式，使其位于页面的正中央，并且大小正确。。[HTML/CSS],html,css,web,Html,Css,Web,我正在学校的一个班上建立自己的网站。我必须设计我希望我的网站看起来像什么，现在我必须建立它我发现了一个我非常喜欢的样式表，“Roboto Slab”，我有一个背景。实际上，我已经完成了主页的大部分内容当我试图格式化文本时，我总是遇到这个错误。我试着把文本放在网页的正中央，它比中间低一点。不仅如此，它还提供了向左和向右滚动的选项，我看不出它有什么理由这样做这是网站的代码 <html> <head> <title>MySite</title&g

我正在学校的一个班上建立自己的网站。我必须设计我希望我的网站看起来像什么，现在我必须建立它

我发现了一个我非常喜欢的样式表，“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>


麦斯特
html，body。，你有flexbox吗{
身高：100%；
}身体{
保证金：0；
字体：标准14px/1.2“Roboto”，Helvetica，Arial，无衬线；
文本对齐：居中；
背景：#111 url（'http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Alpamayo.jpg/1280px-Alpamayo.jpg'）中央顶部/盖；
}：-moz选择{
背景:#2fdd11；
颜色：#fff；
}：：选择{
背景:#2fdd11；
颜色：#fff；
}a{
文字装饰：无；
}a:悬停，a:活动{
大纲：无；
文字装饰：下划线；
}a:焦点{
轮廓：细点；
}.你们甚至有flexbox，.集装箱吗{
位置：绝对位置；
最高：50%；
宽度：100%；
高度：1米；
边缘顶部：-.5em；
}.容器{
填充：8px 20px 15px；
}h1，h2{
字体系列：“Roboto Slab”，Helvetica，Arial，无衬线；
保证金：0；
颜色：#000；
字体大小：400；
字体大小：96px；
}.社会{
边缘顶部：30px；
}.社会{
背景色：#F5F7FA；
边界半径：35px；
利润率：0.3倍；
宽度：26px；
高度：26px；
填充：16px；
显示：内联块；
-webkit过渡：背景色。6s轻松；
过渡：背景色。6s轻松；
}.社交a:悬停，.社交a:焦点{
大纲：无；
背景色：#FC6E51；
}.图标{
宽度：26px；
高度：26px；
}.图标>路径{
填充：#111；
}.链接{
颜色：#333；
边缘顶部：30px；
}.链接a{
显示：内联块；
填充：0 5px；
颜色：#000；
}.链接{
颜色：#000；
}.链接a：悬停{
颜色：#000；
}@介质（最大宽度：660像素）{
h1{
字体大小：64px；
}氢{
字体大小：24px；
}
}@介质（最大宽度：460像素）{
.你喜欢flexbox吗{
显示：无；
}.集装箱{
保证金：0自动；
利润率最高：4%；
}.链接a{
显示：块；
}h1{
字体大小：48px；
}氢{
字体大小：16px；
}
}@介质（最大宽度：350px）{
h1{
字体大小：40px；
}
}
;
你好
这是我独立学习的网站。

我做错了什么？我尝试过使用align:center方法，但这些方法都不适合我

！！编辑

固定字体大小的问题。是我。刚刚在H2的CSS代码中创建了一个新的部分

h1

和

h2

具有相同的大小，因为CSS文件包含在

标记之前，该标记定义了

h1

和

h2

具有

字体大小：96px

。把线移开

<link rel="stylesheet" href="core.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>

我把你的标题标签做得很小，这样你就可以看到效果了，但是你需要根据你的需要调整它，也可能需要调整框的高度，但是你会明白的
 我用小提琴编辑了你的代码。我取出了很多您已经定义的代码，但是您可以简单地将其添加到那里。我认为这将给你一个良好的开端，你想完成什么

HTML:
我自己修好了，见上面的帖子。谢谢你发表这篇文章，它50%告诉了我字体大小的问题所在。效果非常好。非常感谢。
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;
    }
}

<div id="wrapper">
    <div id="container">
        <div id="centerText">
            <h1>Hi.</h1>
            <h1>This is the website for my independent study.</h1>
        </div>
    </div>
</div>

<footer>
    <div class="footer">
        <a href="#">Example Page.</a>
        <a href="#">Another Page.</a>
        <a href="#">Another page! :D</a>
        <a href="#">Blah blah</a>
    </div>
</footer>

html {
    background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Alpamayo.jpg/1280px-Alpamayo.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

h1 {
    padding: 0;
    margin: 0;
}

body {
    overflow-x: hidden;
    }

footer {
    bottom: 0;
    position: fixed;
    width: 100%;
}

.footer {
    height: 25px;
    margin: auto;
    width: 400px;
    text-align:center;
    padding: 10px;
    color:#ffffff;
}

#wrapper {
    height: 200px;
    width: 500px;
    bottom: 50%;
    right: 50%;
    position: absolute;
    font-family: tahoma;
    font-size: 8pt;
    font-weight: bold;
}

#container {
    left: 50%;
    padding: 10px;
    top: 50%;
    margin: 0;
    padding: 0;
    height: 100%;
    height: 100%;
    position: relative;
}

#centerText {
    position: absolute;
    width: 100%;
    height: 20px;
    top: 50%;
    margin-top: -10px;
    text-align: center;
}