I need to center a text, but with justify-content: center
and align-items: center
I'm not getting it.
Not even if I put for example, top: 50%
and left: 50%
, the items are not exactly in the middle. Maybe I'm missing some div
or something, what do I need to do to centralize?
Follow the code:
@font-face {
font-family: 'Gotham';
src: url('Gotham-Medium.otf');
src: url('Gotham-Medium?#iefix') format('embedded-opentype'), url('fonts/Gotham-Medium.otf') format('otf'), url('Gotham-Medium.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Gotham-Light';
src: url('Gotham-Light.otf');
src: url('Gotham-Light?#iefix') format('embedded-opentype'), url('fonts/Gotham-Light.otf') format('otf'), url('fonts/Gotham-Light.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.gotham {
font-family: 'Gotham', sans-serif;
}
.gotham-light {
font-family: 'Gotham-Light', sans-serif;
}
body {
margin: 0;
}
header {
overflow: hidden;
}
.background {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
}
.conteudo {
display: inline;
justify-content: center;
align-items: center;
color: #fff;
font-weight: 275;
width: 40%;
}
.conteudo ul {
list-style: none;
}
.conteudo ul li {
display: inline;
}
.conteudo ul a {
color: black;
font-size: 22px;
padding-right: 8px;
text-decoration: none;
padding: 0.67rem 1.25rem;
margin-right: 50px;
border: 1px solid;
border-color: #fff;
background-color: #fff;
}
.conteudo ul a:hover {
background-color: transparent;
color: #fff;
}
.conteudo h1 {
font-size: 92px;
}
@media only screen and (max-width: 1277px) {
.conteudo ul a {
margin-bottom: 5%;
display: flex;
font-size: 20px;
}
}
@media only screen and (max-width: 375px) {
.conteudo {
width: auto;
}
}
@media only screen and (max-width: 1277px) {
.conteudo h1 {
font-size: 70px;
text-align: center;
}
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Favicon-->
<link rel="shortcut icon" href=".png">
<!-- Author Meta -->
<!-- meta character set -->
<meta charset="UTF-8">
<!-- Site Title -->
<title>Farol Filmes</title>
<script src="js/main.js"></script>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!--CSS=============================================--><linkhref="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/linearicons.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/teste.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<header>
<video loop muted autoplay class="background">
<source src="video\background.mp4" type="video/mp4">
</video>
</header>
<nav class="conteudo">
<h1><span class="gotham-light">GUI</span> <span class="gotham">LUCCA</span></h1>
<br>
<ul class="gotham">
<li><a href="#">Filme</a></li>
<li><a href="#">Fotos</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
<script src="js/vendor/jquery-2.2.4.min.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>