Question

我已经开始构建我的第一页，但是当我提到将内容对齐并在中心对齐时，标题也就不在中心。这是下面的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>

Answer 1

虽然align-content和align-items非常相似，但是align-items是您要用于垂直对齐内容居中位置的一个。

Here's a great blog post explaining the difference.

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

@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>

将文本对齐到中心的确切方法是什么？

1 个答案: