Shadows 1.0 text not centering

[lesliekirk]

I'm using the bold code to try and center the text in this div. I'm including what it is contained within.

<section class="o-wrapper t-site-header__masthead">

...


<div class="o-layout o-layout--align-bottom">

...

<div class="o-layout o-layout--align-center u-width-12 u-width-8--l ">

....

<div class="o-layout__item u-hidden u-flex--l u-width-3 u-width-3--l u-text-center "><p> My Test </p></div>

...

</div>

...

</div>

...

</section>

It is not centering but aligning left. What am I missing?

[Matt Zimmermann]

Hi Leslie,

There should be no reason that isn't working. I have run a couple of tests and that code seems good. Do you have any custom styling for that section that could be overriding the utility class?

[lesliekirk]

Hi Leslie,

There should be no reason that isn't working. I have run a couple of tests and that code seems good. Do you have any custom styling for that section that could be overriding the utility class?

I would need to find a default theme-styles.css file and compare it - I'm seeing a lot of "center" for various t-site-header items.

[Bruce - PhosphorMedia]

Does u-text-center work with "flex box"? Usually your centering items with a flex grid, you need to use a flex-content directive like these https://css-tricks.com/almanac/prope...stify-content/

If you want the text inside the containers to be centered, you need to apply the center to the inner container <p>

[lesliekirk]

Does u-text-center work with "flex box"? Usually your centering items with a flex grid, you need to use a flex-content directive like these https://css-tricks.com/almanac/prope...stify-content/

If you want the text inside the containers to be centered, you need to apply the center to the inner container <p>

I tried applying it to the <p> it still didn't work...

[Bruce - PhosphorMedia]

try using inspector on the containing div and play with "justify-content" one of those settings might give you the appearance you are looking for.

[lesliekirk]

try using inspector on the containing div and play with "justify-content" one of those settings might give you the appearance you are looking for.

LOL, yes Inspector is my friend along with the dev tools.

[Bruce - PhosphorMedia]

yes, probably the most fundamental "work shift" of the 21st century for us. basically, mines just open all the time.