[Header] "text alignement" should display accordingly when there is an icon as content

[challet]

Steps

• Display a header with a text alignement, for instance ui centered aligned header
• Add an icon and a <div class="content"> (as seen in documentation example) in the header.

Expected Result

The header content is aligned accordingly.

Actual Result

The header content stays left aligned.

Version

2.4.2

Testcase

https://jsfiddle.net/w236rdmz/

• it works as expected when there is no <div class="content"> following the icon
• removing the display: table-cell property on both the <i> and <div> elements seems to fix it, though I guess it might break other cases.

[VanquishedWombat]

Maybe not an answer but the HTML spec informs us that H2 is meant to contain only 'phrasing content' and not structural stuff like div's. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements. Since SUI is building on HTML it is usually worth following HTML principles as a foundation and SUI then applies pleasing CSS.

Re-writing your code, removing the div inside the H2 seems to work, though vertical alignment may need attention.

has a div.content

[challet]

That's right, so seeing it the other way around and replacing the divs by spans, wich belongs to phrasing content, the problem remains : https://jsfiddle.net/cp6Lfj3m/. I think it's more about the .content class than the type of element, though your comment is indeed right from a semantic (not the ui one) point of view.

Also added a case with only <div>s as I thought it was in the documentation example, but it happens that the "icon" one is using <h2> as well. The one about "text alignment" has indeed no div inside. It confuses me, but imho variations should be compatible with all kind of types and contents referenced.