text-align set with css variable doesn't work on Edge 15 (Custom Properties)

Confirmed Issue #11728214 • Assigned to Saqib A.

Details

Author
Jesse L.
Created
Apr 20, 2017
Privacy
This issue is public.
Found in
  • Microsoft Edge
Reports
Reported by 3 people

Sign in to watch or report this issue.

Steps to reproduce

https://wptest.center/#/xumvx7

 

Description

CSS property text-align does not work when it’s set with a CSS variable.

How to reproduce

  1. Create HTML page with a div that has text
  2. Create css variable that has value center
  3. Set the div’s text-align to that variable
  4. Open page with Edge 15

Behaviour

The text is not centered

Expected behaviour

The text should be centered

Example

https://jsfiddle.net/jzx8h6cb/

Attachments

0 attachments

    Comments and activity

    • Microsoft Edge Team

      Changed Assigned To to “James M.”

      Changed Assigned To to “Bogdan B.”

      Changed Assigned To from “Bogdan B.” to “Kevin B.”

      Changed Status to “Confirmed”

      Changed Title from “text-align set with css variable doesn't work on Edge 15” to “text-align set with css variable doesn't work on Edge 15 (Custom Properties)”

      Changed Steps to Reproduce

      Changed Title from “text-align set with css variable doesn't work on Edge 15 (Custom Properties)” to “text-align set with css variable doesn't work on Edge 15 (Custom Properties)”

      Changed Assigned To from “Kevin B.” to “Saqib A.”

      Changed Status from “Confirmed” to “In progress”

    • Any progress on this? It’s been 4 months.

      It’s a pretty important/basic browser behavior.

    • Microsoft Edge Team

      Changed Status from “In progress” to “Confirmed”

    • Since you asked, I just wanted to confirm this won’t make it to our next release in October, but we however fixed a lot of issues with CSS Custom Properties in this release, even though this one didn’t make it.

    • Hi i know there has been a lot of updates for Edge but with regards to this issue is there any progress from your end or maybe a workaround that we can add to our code to get it to work.
      I have tried to use this (style="text-align: center !important;") directly in Html without CSS but i get the same issue.

    • So after playing around with some code i found that if i use (text-align: inherit;) it seems to center the text, upon checking this extra i found that a parent DIV had the (text-align: center;) css enabled. so that means the bug might be if two center tags are used this issue may occur.

      just to add i have been using this for tag.
      here is a copy of my css

      hr {
      max-width:15rem;
      padding:0;
      text-align:center;
      border:none;
      border-top:solid .25rem;
      margin-top:2.5rem;
      margin-bottom:2.5rem;
      }

    • Ali, your code doesn’t seem to use css variables. If you are having general problems with text-align that does not involve custom properties, could you please file another issue about that? Thanks!

    • Me too. on Edge 17.

    You need to sign in to your Microsoft account to add a comment.

    Sign in