我正在自己学校上的一堂课上建立自己的网站。我必须设计自己想要的网站外观,现在必须构建它。

我找到了我非常喜欢的样式表“ 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/

10-12 12:30
查看更多