locked
IE 11 and text-Align RRS feed

  • Question

  • User-86041214 posted

    Hi:

    Recently about one month ago, I found the text-Align is not working any more, 

    Following is my css setting:

    .button {
    font-family: "Arial", "Helvetica", "sans-serif";
    font-size: 13px;
    text-align:center;
    }

    however, the text-align not work. Is there any substitute attribute can replace that, or 
    IE11 no longer support that? Any suggestion is appreciated, thanks a lot.

    Monday, September 19, 2016 2:25 AM

Answers

  • User-654786183 posted

    abramhum.c.l

    IE 11 supports "text-align" css property and "center" works fine.  You may get this issue because of some styles getting overridden.  Please see the following link for text-align property.

    https://css-tricks.com/almanac/properties/t/text-align/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 19, 2016 4:22 AM
  • User1724605321 posted

    Hi ,

    text-align works in IE11 , You could refer to below code sample(add width will make you better distinguish) :

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(function () {
    
            });
        </script>
        <style type="text/css">
            .button {
                font-family: "Arial", "Helvetica", "sans-serif";
                font-size: 13px;
                text-align: center;
                width:300px
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <input id="Button1" type="button" value="button" class="button" />
        </form>
    </body>
    </html>

    As @senthilwaits said , you could use F12 debugger tool to check the css style of the item :

    https://msdn.microsoft.com/en-us/library/gg699337(v=vs.85).aspx 

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 19, 2016 6:57 AM
  • User1652675083 posted

    Text-align is working fine in IE11, I have tested same on IE11 and it is working perfectly.

    Please see my JSFidddle example for same.

    In your case it seems like some other CSS is overriding your .button class

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 19, 2016 9:23 AM

All replies

  • User-654786183 posted

    abramhum.c.l

    IE 11 supports "text-align" css property and "center" works fine.  You may get this issue because of some styles getting overridden.  Please see the following link for text-align property.

    https://css-tricks.com/almanac/properties/t/text-align/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 19, 2016 4:22 AM
  • User1724605321 posted

    Hi ,

    text-align works in IE11 , You could refer to below code sample(add width will make you better distinguish) :

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript">
            $(function () {
    
            });
        </script>
        <style type="text/css">
            .button {
                font-family: "Arial", "Helvetica", "sans-serif";
                font-size: 13px;
                text-align: center;
                width:300px
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <input id="Button1" type="button" value="button" class="button" />
        </form>
    </body>
    </html>

    As @senthilwaits said , you could use F12 debugger tool to check the css style of the item :

    https://msdn.microsoft.com/en-us/library/gg699337(v=vs.85).aspx 

    Best Regards,

    Nan Yu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 19, 2016 6:57 AM
  • User1652675083 posted

    Text-align is working fine in IE11, I have tested same on IE11 and it is working perfectly.

    Please see my JSFidddle example for same.

    In your case it seems like some other CSS is overriding your .button class

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 19, 2016 9:23 AM