CODEWITHSUNDEEP
css
Peter
Peter

Reputation: 419

Vertical-align not working as expected

As I was trying to get more familiar with vertical-align property I came across a problem. The default value of the property is baseline, which aligns the baseline of the element with the baseline of its parent. I made the h2 element at the bottom of the code display as inline-block to see how it behaves and that's when I got surprised. Shouldn't it show just right above the border of the body same as the blue box shows, instead of being somewhere in the centre of the body? It looks like aligning those boxes(divs) vertically affects where the baseline of the body is, but why? Please, click "Full page" when running the code snippet to see the behaviour.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vertical align</title>
	<style>
		body {border: 1px solid black; line-height: 1;}
		.box {
			display: inline-block;
			width: 150px;
			vertical-align: middle;
		}
		.tall {
			height: 300px;
			background-color: lightblue;
		}
		.short {
			height: 100px;
			background-color: green;
		}
		.middle {
			height: 200px;
			background-color: yellow;
		}

		.square {
			display: inline-block;
			width: 5px;
			height: 5px;
			background-color: red;
			vertical-align: middle;
		}
		h2 {display: inline-block;}
	</style>
</head>
<body>
	<h1>Vertical Align</h1>
	<div class="box tall"></div>
	<div class="box short"></div>
	<div class="box middle"></div>

	<h2>Picture aligned <div class="square"></div> within text</h2>
</body>
</html>

I expected h2 to go down as you can see in the picture below. enter image description here

Upvotes: 2

Views: 2214

Answers (3)

Peter
Peter

Reputation: 419

I highly recommend reading this vertical-align article to gain in-depth understanding of the property.

Upvotes: 3

Koushik Mondal
Koushik Mondal

Reputation: 875

When you are using inline-block, it is better to handle your elements by positioning them.See my changes in css-style for h2.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vertical align</title>
	<style>
		body {border: 1px solid black; line-height: 1;}
		.box {
			display: inline-block;
			width: 100px;
			vertical-align: middle;
		}
		.tall {
			height: 300px;
			background-color: lightblue;
		}
		.short {
			height: 100px;
			background-color: green;
		}
		.middle {
			height: 200px;
			background-color: yellow;
		}

		.square {
			display: inline-block;
			width: 5px;
			height: 5px;
			background-color: red;
			vertical-align: middle;
		}
		h2 {
                  display: inline-block;
                  width:300px;
                  size:10px;
                  vertical-align:bottom;
                 }
	</style>
</head>
<body>
	<h1>Vertical Align</h1>
	<div class="box tall"></div>
	<div class="box short"></div>
	<div class="box middle"></div>

	<h2>Picture aligned <div class="square"></div> within text</h2>
</body>
</html>

Upvotes: -1

KWeiss
KWeiss

Reputation: 3144

The element is aligned this way because baseline aligns it with the baseline of the text inside the parent element.
In your case, the text baseline is pushed down by the large inline-block divs. The h2 aligns with this text. If you want it to align with the bottom of the other inline-elements (as shown in your image), add the style vertical-align: bottom to your h2.

This article explains the different vertical-align values very well:
https://css-tricks.com/what-is-vertical-align/

Upvotes: 2

Related Questions