How to align a div vertically? [duplicate]-CodePudding

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

CodePudding user response：

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;
}

CodePudding user response：

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>