Vertical centering a container of text not working with margin auto

Question

So I want to have a block of text centered next to an image, and I tried to use margin auto 0px; but it nothing. I also don't understand why the text starts at the bottom of the container instead of the top.

Here is the code:

.feature {
  margin: 5px 0px;
}

.feature img {
  display: inline-block;
  width: 49%;
}

.feature .feature-detail {
  display: inline-block;
  width: 49%;
  margin: auto 0px;
}

<div class="feature">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Soylent.svg/800px-Soylent.svg.png">
  <div class="feature-detail">
    <h3>Feature Title</h3>
    <p>Feature Description</p>
  </div>
</div>

Shiv Kumar Baghel · Answer 1 · 2018-10-22T05:17:44.753

2

use vertical-align: middle; in image css image css.

and display: flex; & align-items:center; in .feature class

.feature {
  display: flex;
  align-items:center;
  margin: 5px 0px;
}

.feature img {
  display: inline-block;
  width: 49%;
  vertical-align:middle;
}

.feature .feature-detail {
  display: inline-block;
  width: 49%;
  margin: auto 0px;
}

<div class="feature">

  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Soylent.svg/800px-Soylent.svg.png">

  <div class="feature-detail">
    <h3>Feature Title</h3>
    <p>Feature Description</p>
  </div>

</div>

edited Oct 22 '18 at 05:17

answered Oct 22 '18 at 05:09

Shiv Kumar Baghel

2,464
6
18
34

Does not look centered to me. – connexo Oct 22 '18 at 05:14
Thanks @connexo changed code with `feature` class. added `display: flex;` with `align-items: center;` – Shiv Kumar Baghel Oct 22 '18 at 05:20

score 2 · Accepted Answer · answered Oct 22 '18 at 05:13

Because you made all direct children of .feature have display: inline-block; a simple vertical-align: middle; (on both the image and .feature-detail) will suffice.

.feature {
  margin: 5px 0;
}

.feature > * {
  display: inline-block;
  width: 49%;
  vertical-align: middle;
}

<div class="feature">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Soylent.svg/800px-Soylent.svg.png">
  <div class="feature-detail">
    <h3>Feature Title</h3>
    <p>Feature Description</p>
  </div>
</div>

score 0 · Answer 3 · answered Oct 22 '18 at 05:54

no need to use display: inline-block; vertical-align:middle; and margin:auto 0px; for img and .feature-detail class check updated css:

.feature {
  display: flex;
  align-items: center;
  margin: 5px 0px;
}

.feature img {
  width: 49%;
}

.feature .feature-detail {
  width: 49%;
}

<div class="feature">

  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Soylent.svg/800px-Soylent.svg.png">

  <div class="feature-detail">
    <h3>Feature Title</h3>
    <p>Feature Description</p>
  </div>

</div>

Gerard · Answer 4 · 2018-10-22T06:21:13.297

If you use a flexbox, you can simplify your CSS.

* {
  box-sizing: border-box;
}

.feature {
  margin: 5px 0px;
  display: flex;
  align-items: center; /* Vertical alignment */
}

.feature img {
  width: 50%;
}

<div class="feature">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Soylent.svg/800px-Soylent.svg.png">
  <div class="feature-detail">
    <h3>Feature Title</h3>
    <p>Feature Description</p>
  </div>
</div>

Vertical centering a container of text not working with margin auto

4 Answers4