Center text vertically inside a div

[_Flaviu]

The parent div would include several divs, where the text will be aligned separately.

[_Flaviu]

I have tried:

			Tuesday
			2023-03-15

No work.

[Lost User]

I'm not a CSS expert but take a look at the example here: CSS Layout - Horizontal & Vertical Align[^]; it shows how to centre a div element.

[_Flaviu]

Yes, I know, but the trick is that the second div has no vertical correct alignment, and I don't realise why:

Horizontal and Vertical alignment


.container {
	height: 200px;
	width: 400px;
	border: 2px dashed #4b2869;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	position: relative;
}
.container1 {
	height: 200px;
	width: 400px;
	border: 2px dashed #4b2869;
	display: table-cell;
	text-align: center;
	vertical-align: bottom;
	position: absolute;
}

container

container1

[Lost User]

Sorry, I have tried a number of different styles and combinations but cannot get it to do what you want. But as I mentioned, I am not a CSS expert.

[_Flaviu]

Thank you Richard a lot. As you see, the vertical alignment of the second div is not correct, and I don't know why, I am not a web developer at all.

[Lost User]

I'm afraid I only dabble so my knowledge is limited. You might try opening the same question in QA to see if it gets a better response.

[Jeremy Falcon]

Just a heads up, floats are not needed here at all. Anyway, the vertical align property is for inline containers. A div by default is a block level element so it's ignored. To see what I mean check out the examples on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) and [W3Schools](https://www.w3schools.com/cssref/tryit.php?filename=trycss\_vertical-align). With that being said, there are much, much better ways to do this. If you want to vertically center without having to use explicit heights, the recommended way these days is to just use flexbox. There are a ton of other techniques like negative margins, line height, etc. too but flexbox should be something to master anyway. So, no time like the present.

Tuesday 2023-03-20

_Be aware that inline styles should be avoided. Only using them here to match your example._

Jeremy Falcon

[_Flaviu]

It works now, thanks a lot !

[Jeremy Falcon]

You're very welcome.

Jeremy Falcon