-3

我已经开始构建我的第一页，但是当我提到证明内容并在中心对齐内容时，我的标题也没有在中心。这是我的css和html下面的代码。

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');

body{
    font-family:'Montserrat',sans-serif;
    margin:0;
    padding:0;
    
}
.heading{
    display:flex;
    justify-content:center;
    text-align: center;
    align-content:center;
    min-height: 100vh;
    background: #000;
    
}
.heading-2{
    display:flex;
    text-align: center;
    justify-content:center;
    align-content:center;
    min-height: 100vh;
    background: #000;
    
}
.heading h1{
    margin: 0;
    text-align: center;
    padding:0;
    font-size: 120px;
    color: #fff;
}
.heading-2 h1{
    margin: 0;
    text-align: center;
    padding:0;
    font-size: 120px;
    color: #fff;
}
.heading{
    background: url(https://images.unsplash.com/photo-1529387814771-bd36b10c01ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80);
    background-size: cover;
}
.heading-2{
    background: url(https://images.unsplash.com/photo-1529387814771-bd36b10c01ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80);
    background-size: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    
    <title>Stan-Lee</title>
    <link rel="stylesheet" href="main.css">
</head>
     <body>
         <section class="heading" text-align="centre"><h1> Tribute</h1></section>
         <section class="heading-2"><h1>The End</h1></section>
    
     </body>
</html>

4

1 回答 1

0

虽然 align-content 和 align-items 非常相似，align-items但您要使用它来垂直居中内容。

这是一篇很棒的博客文章，解释了差异。

我在下面更新了您的代码段，如您所见，标题在中心正确对齐。

@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');

body{
    font-family:'Montserrat',sans-serif;
    margin:0;
    padding:0;
    
}
.heading{
    display:flex;
    justify-content:center;
    text-align: center;
    align-items:center;
    min-height: 100vh;
    background: #000;
    
}
.heading-2{
    display:flex;
    text-align: center;
    justify-content:center;
    align-items:center;
    min-height: 100vh;
    background: #000;
}
.heading h1{
    margin: 0;
    text-align: center;
    padding:0;
    font-size: 120px;
    color: #fff;
}
.heading-2 h1{
    margin: 0;
    text-align: center;
    padding:0;
    font-size: 120px;
    color: #fff;
}
.heading{
    background: url(https://images.unsplash.com/photo-1529387814771-bd36b10c01ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80);
    background-size: cover;
}
.heading-2{
    background: url(https://images.unsplash.com/photo-1529387814771-bd36b10c01ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80);
    background-size: cover;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   
    
    <title>Stan-Lee</title>
    <link rel="stylesheet" href="main.css">
</head>
     <body>
         <section class="heading" text-align="centre"><h1> Tribute</h1></section>
         <section class="heading-2"><h1>The End</h1></section>
    
     </body>
</html>

于 2019-02-22T18:12:26.103 回答