Home/ Questions/Q 7816387
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T05:51:00+00:00

What I wanted to achieve was centering a string meanwhile forcing it to the

  • 0

What I wanted to achieve was centering a string meanwhile forcing it to the bottom of the container div, but the following produces 3 different outcomes in different browsers.

<style>
         #outer {
            position: relative;
            background-color:blue;
            height: 50px;
            text-align: center;
         }

         #inner {
            bottom: 0px;
            position: absolute;
            background-color:red;
         }
        </style>
    </head>
    <body>
        <div id="outer">
            <span id="inner">
                aaaaaaaaaaaaaaaaaaaaaaa
            </span>
        </div>
    </body>

Chrome centers the #inner perfectly.
Firefox start outputting the string from the perfect center to the right, so somehow it looks a little shifted, the longer the string, the more obvious to the eye.
IE starts outputting the text from the left.

Is there any workaround for this? Which behaviour complies with the standard?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Hey i think you should give left and right :0 in your css as like this 

    #inner {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: red;
}
    • 0