I've tried using text-align
and justify-content
but both of them refuse to work. I think I've made a mistake with all the spacings.
Here's the HTML:
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
}
.contents1 {
display: flex;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1>This website is awesome</h1>
<p>This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
CodePudding user response:
Put the justify-contents and align-items into class image
.container1 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.image{
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
}
CodePudding user response:
It is a good practice to first add some background-color to better see where each element is and then remove these dumb colors. For the container which has a display:flex, please add
width:100%;
CodePudding user response:
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 75%;
margin: auto;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 75%
height: 200px;
margin: auto;
}
.contents1 {
display: flex;
flex-direction: column;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1 class="center">This website is awesome</h1>
<p class="center">This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
Assuming you want to center the container1 div with the image placeholder div, the issue is that your divs don't have an assigned with. Set their width to a percentage less than the parent and then use the CSS property margin: auto. You will also need to apply flex-direction: column to your parent div, contents1
CodePudding user response:
.container1 {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 400px;
margin: auto;
}
.placeholder {
display: flex;
justify-content: center;
align-items: center;
background-color: #6D747D;
width: 400px;
height: 200px;
margin: auto;
}
.contents1 {
display: flex;
flex-direction: column;
margin: 0 auto;
}
<div class="contents1">
<div class="container1">
<h1 class="center">This website is awesome</h1>
<p class="center">This website has some subtext that goes hear under the main title. It's a smaller font and the color is lower contrast</p>
<div class="button">Sign up</div>
</div>
<div class="image">
<div class = "placeholder">this is a placeholder for an image</div>
</div>
</div>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>