setDivCentered function

void setDivCentered(
  1. HTMLDivElement div, {
  2. bool centerVertically = true,
  3. bool centerHorizontally = true,
  4. bool checkBootstrapClasses = true,
})

Sets div as centered content, using display property as table and sub div elements display property as table-cell.

Implementation

void setDivCentered(
  HTMLDivElement div, {
  bool centerVertically = true,
  bool centerHorizontally = true,
  bool checkBootstrapClasses = true,
}) {
  div.style.display =
      isInlineElement(div, checkBootstrapClasses: checkBootstrapClasses)
      ? 'inline-table'
      : 'table';

  div.classList.removeAll(_divCenteredBootstrapConflictingClasses);

  var subDivs = div.querySelectorAll(':scope > div').whereHTMLElement();

  for (var subDiv in subDivs) {
    subDiv.classList.removeAll(_divCenteredBootstrapConflictingClasses);
    subDiv.style.display = 'table-cell';

    if (centerHorizontally) {
      subDiv.style.textAlign = 'center';
    }

    if (centerVertically) {
      subDiv.style.verticalAlign = 'middle';
    }

    var contentDivs = subDiv
        .querySelectorAll(':scope > div')
        .whereHTMLElement();

    for (var contentDiv in contentDivs) {
      if (!isInlineElement(
        contentDiv as HTMLDivElement,
        checkBootstrapClasses: checkBootstrapClasses,
      )) {
        contentDiv.style.display = 'inline-block';
      }
    }
  }
}