-3

I have started building my first page but then when I have mentioned justify content and align content at center then also my heading are not coming at center.This is my css and html codes below.

@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>
Prabal Das
  • 1
  • 1
  • 1
    Please show us relevant code snippets of what you have tried so far. – AndrewL64 Feb 22 '19 at 17:18
  • And try replacing the above flex properties with `text-align: center` and see if that works. – AndrewL64 Feb 22 '19 at 17:19
  • There are a ton of them, but we can only recommend the best one for what you're doing if you give us code to work with :D –  Feb 22 '19 at 17:24
  • 1
    To get help, you need to help by providing sample code. Otherwise it's a guessing game and a waste of time for everyone. – Kalnode Feb 22 '19 at 17:28

1 Answers1

0

While align-content and align-items are very similar, align-items is the one you're going to want to use for centering the content perpendicularly.

Here's a great blog post explaining the difference.

I have updated your snippet below and as you can see, the titles align correctly in the center.

@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>
Kyle Goode
  • 1,108
  • 11
  • 15