Vertical alignment working but content inside not centering

[toolman]

Hi there,

I am trying to center a div vertically.

I have done this using the following CSS which works, but the content inside isn’t centering.

I have attached a screenshot of what I mean.

This is my CSS.

Can anyone tell me why the content inside the main-banner-text is not centered?

.main-banner{
	position: relative
}

.main-banner-text{
	margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
	z-index: 222;
	top: 50%;
    transform: translateY(-50%);
    /* vendor prefixes omitted due to brevity */
}

Many thanks!

[coothead]

Hi there toolman,

we need to so see all the HTML and all the CSS.

coothead

[PaulOB]

@toolman

Can anyone tell me why the content inside the main-banner-text is not centered?

That’s because you have no rules applied that will affect the content.

All you have is a rule for centering the whole element. You probably need to use flexbox instead and then can control both the element and it’s content.

You probably don’t need the absolute positioning either but without context it’s hard to tell.

If you give the relevant HTML and css as already asked I’m sure we can come up with the right solution

[toolman]

Thanks for the replies. I used flex and align-items: center to align the inner content

[BestWeb]

Have you tried using:

text-align: center;

?

[Erik_J]

@BestWeb

text-align: center;

Hi BestWeb,

I just want to remind that OP wanted a vertical alignment.

(Besides, the text-align property only works for inline content, though it would affect text in flexbox too.)