I'm trying to learn flexbox and I am struggling with centering the text in a div in the header. I have an image on the left and then a dif with a text_box and I'm trying to center the h1 using justify-content: center but no matter what I put there it will not mvoe the text. The only way I can get the text to center is by using margin: 0 auto; but that seems to be more to the right as well.
Code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 1em;
line-height: 1.7;
color: #777;
padding: 20px;
}
.header {
display: flex;
flex-wrap: wrap;
height: 60vh;
background-image: linear-gradient(
to right bottom,
rgba(12, 186, 186, 0.5),
rgba(56, 0, 54, 0.5)),
url(../img/code.jpg);
background-size: cover;
background-position: top;
clip-path: polygon(0 0, 100% 0, 100% 55vh, 0 100%);
/* Defines how to distribute the empty space between child elements */
color: #fff;
padding: 40px;
}
.header_img img {
display: flex;
width: 100%;
border-radius: 82%;
padding: 0;
}
.header_text {
justify-content: center
}
hr {
display: flex;
}
@media screen and (max-width: 576px) {
.text_box h1 {
font-size: 1.4em;
}
.text_box h2 {
font-size: 1.2em;
}
.header {
justify-content: center;
}
.header_img {
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<header class="header">
<div class="header_img">
<img src="assets/img/stephen_moore_london_2012.jpg" alt="">
</div>
<<div class="header_text">
<h1>My Name</h1>
<hr>
<h2>Something Here</h2>
</div>
</header>
</body>
</html>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
Update the header_text class:
.header_text {
display: flex;
flex-wrap: wrap;
flex-direction: column;
flex: 1;
align-items: center;
justify-content: center;
}
CodePudding user response:
You can center the text for a given element. Here I removed all the excess just to show the text - I added borders for clarity on what is where and to show the content can get out with what you have
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 1em;
color: #777;
padding: 20px;
}
.header {
display: flex;
justify-items: center;
height: 60vh;
padding: 2rem;
border: 1px solid blue;
}
.header-text {
display: flex;
flex-direction: column;
justify-items: center;
border: 1px solid lime;
width: 100%;
}
.header-text h1 {
text-align: center;
}
<body>
<header class="header">
<div class="header_img">
<img src="assets/img/stephen_moore_london_2012.jpg" alt="">
</div>
<div class="header-text">
<h1>My Name</h1>
<hr>
<h2>Something Here</h2>
</div>
</header>
</body>
</html>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>