CODEWITHSUNDEEP
htmlcss
Arun Bohra
Arun Bohra

Reputation: 547

Positioning div elements in center with each other

Here is my code. Notice that the height of image is bigger than the div which is what I want. What I don't want is that the other div containing text is at the bottom of the image. Is there any way to fix this? Also, I tried margin-bottom to feature_details.

.feature_details {
  display: inline-block;
  width: 40%;
  text-align: left;
  margin-bottom: 4rem;
}

.feature_display {
  display: inline-block;
  width: 50%;
}

.feature_display__img {
  width: 100%;
  height: auto;
}
<div class="feature_section__feature_left">
      <div class="feature_details">
        <h3 class="feature_name">Reviews that really matter</h3>
        <div class="feature_info">
          <p>
            Insolvers makes it easy to create rich, high-quality content using
            the inbuilt editor.
          </p>
          <p>
            Add images, gifs, and media - draft, experiment, and share with your
            peers before scheduling.
          </p>
        </div>
      </div>
      <div class="feature_display">
        <div class="feature_display__img">
          <img src="https://i.pinimg.com/564x/e9/29/1c/e9291cc39e820cd4afc6e58618dfc9e0.jpg" alt="Feature display" />
        </div>
      </div>
    </div>

Upvotes: 0

Views: 38

Answers (3)

Arun Bohra
Arun Bohra

Reputation: 547

We can also use relative positioning on the details div and push it from the bottom.

.feature_details {
  display: inline-block;
  width: 40%;
  text-align: left;
  margin-bottom: 4rem;
  position: relative;
  bottom: 5rem;
}

.feature_display {
  display: inline-block;
  width: 50%;
}

.feature_display__img {
  width: 100%;
  height: auto;
}

Upvotes: 0

Freduah Gideon
Freduah Gideon

Reputation: 1350

Update You CSS With These Changes

.feature_section__feature_left{
      display: grid;
      grid-template-columns: repeat(2,minmax(50%,50%));
      align-items: center;
    }
    .feature_details {
  display: inline-block;
  /* width: 40%; */
  text-align: left;
  margin-bottom: 4rem;
}

.feature_display {
  display: inline-block;
  /* width: 50%; */
}

.feature_display__img {
  width: 100%;
  height: auto;
}

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115010

Add vertical-align: middle; to your image container.

.feature_details {
  display: inline-block;
  width: 40%;
  text-align: left;
  margin-bottom: 4rem;
}

.feature_display {
  display: inline-block;
  width: 50%;
  vertical-align: middle;
}

.feature_display__img {
  width: 100%;
  height: auto;
}
<div class="feature_section__feature_left">
  <div class="feature_details">
    <h3 class="feature_name">Reviews that really matter</h3>
    <div class="feature_info">
      <p>
        Insolvers makes it easy to create rich, high-quality content using the inbuilt editor.
      </p>
      <p>
        Add images, gifs, and media - draft, experiment, and share with your peers before scheduling.
      </p>
    </div>
  </div>
  <div class="feature_display">
    <div class="feature_display__img">
      <img src="https://i.pinimg.com/564x/e9/29/1c/e9291cc39e820cd4afc6e58618dfc9e0.jpg" alt="Feature display" />
    </div>
  </div>
</div>

Upvotes: 1

Related Questions