Center text vertically inside a div

_Flaviu

I have the following code:

		Tuesday
		2023-03-15

Why this code doesn't center the text at middle on vertical direction ?

_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