0

the img cannot be centered vertically when i use vertical-align, I really dont understand why.

h1 {
  position: relative;
  line-height: 50px;
  background: blanchedalmond;
}

h1::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 100%;
  border-top: 1px solid green;
}

img {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
<h1>
  <img src="https://img01.yzcdn.cn/vant/cat.jpeg" />
  vertical-align middle
</h1>
chenguang
  • 13
  • 3

1 Answers1

0

First, you don't have vertical align middle applied. You have posted it as text in your HTML but as such, it also only works as text but not as a code command.

Then, vertical-align: center; only works in combination with tables or table-cells. So you would need to apply: display: table-cell;. However, the more modern solution would be flexbox. Use: h1 { display: flex; align-items: center; } and the image will be vertically centered within the <h1> tag.

Then you have 2 issues:

The critical issue: <h1><div></div></h1> is an invalid HTML markup that will neither pass the W3C nor the WHATWG markup check. A <div> cannot be a child within a header tag.

The minor issue is with the <img /> tag. Since HTML5 the image tag is an empty tag. Means it does not have a closing tag nor does it have a slash at the end. It's simply written <img>. Only a few frameworks/libraries still use the slash.

h1 {
  position: relative;
  line-height: 50px;
  background: blanchedalmond;
  display: flex;
  align-items: center;
}

.line {
  position: absolute;
  top: 50%;
  width: 100%;
  border-top: 1px solid green;
}

img {
  width: 30px;
  height: 30px;
}
<h1>
  <div class="line"></div>
  <img src="https://img01.yzcdn.cn/vant/cat.jpeg" />
  vertical-align middle
</h1>
Parzival
  • 2,051
  • 4
  • 14
  • 32
tacoshy
  • 10,642
  • 5
  • 17
  • 34
  • 1
    "Since HTML5 the image tag is an empty tag." — It was empty in HTML 3.2 and 4.x. In HTML is is void. (Which means the same thing, but it is a new name for it). "Means it does not have a closing tag nor does it have a slash at the end. " — That means the end tag is forbidden but the `/` at the end of the start tag is *optional*. – Quentin Mar 30 '21 at 16:25
  • I have edited my code, but its not the keypoint. I want to know why the img cannt be centered vertically, do not use other methods – chenguang Mar 30 '21 at 17:36
  • chenguang see above it exactly explains why your code cant be vertically centered. – tacoshy Mar 30 '21 at 17:38
  • *only works in combination with tables or table-cells* --> this is not true. Vertical-align apply to inline level element in order to get aligned inside a linebox so they can be applied to image and text without the need for table-cell https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align – Temani Afif Mar 30 '21 at 19:22
  • @TemaniAfif right, as headings by default block level elements, it still wont apply to them. Feel free to edit my anwser to be more correct. You have my consent. – tacoshy Mar 30 '21 at 19:39
  • heading is irrelevant here since vertical-align is applied to the img which is the inline element. an inline element (img) inside a line-box that is inside a block level element (the heading) – Temani Afif Mar 30 '21 at 19:42