-1

HTML:

#image-text {
    background-color: black;
    color: white;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-content: center;
}
#mission-picture{
  background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 1200px;
  height: 700px;
  margin: 0 auto;
}
<div id="mission-picture">  
          <div id="image-text">
            <h2>Our Mission</h2>
            <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
          </div>
        </div>

This is how the text should be display if done correctly: https://content.codecademy.com/courses/freelance-1/unit-4/img-tea-cozy-redline.jpg

Sinan Yaman
  • 5,714
  • 2
  • 15
  • 35
Grafcar
  • 1
  • 6
    Does this answer your question? [How do I vertically align text in a div?](https://stackoverflow.com/questions/2939914/how-do-i-vertically-align-text-in-a-div) – dave Oct 05 '21 at 05:01

2 Answers2

-1

You can add display:flex; align-items:center to #mission-picture

#mission-picture{
  background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 1200px;
  height: 700px;
  margin: 0 auto;
  display:flex;
  align-items:center;
}
Mohib Arshi
  • 830
  • 4
  • 13
-1

Add display: flex; to #mission-picture and margin: auto 0; to #image-text

#image-text {
  background-color: black;
  color: white;
  width: 100%;
  text-align: center;
  /* display: flex;
  flex-direction: column;
  align-content: center; */
  margin: auto 0;
}

#mission-picture {
  background-image: url("https://content.codecademy.com/courses/freelance-1/unit-4/img-mission-background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 1200px;
  height: 700px;
  margin: 0 auto;
  display: flex;
}
<div id="mission-picture">
  <div id="image-text">
    <h2>Our Mission</h2>
    <h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
  </div>
</div>
Nitheesh
  • 19,238
  • 3
  • 22
  • 49