31241 2009-11-08 10:38:18 -0800 Absolutely positioned, inline elements within a container that horizontally centers 2023-07-25 15:18:02 -0700 1 1 1 Unclassified WebKit Layout and Rendering 528+ (Nightly build) PC All RESOLVED CONFIGURATION CHANGED P2 Normal --- 4860 77754 0 samail91 webkit-unassigned ahmad.saleem792 karthikeyan.jambulingam robert robin zalan oldest_to_newest 161426 0 42715 samail91 2009-11-08 10:38:18 -0800 Created attachment 42715 Reveals a rendering bug in webkit. Absolutely position, inline elements should remain centered until left or right properties are set. Whenever an an inline element's position property is set to absolute and the left, right, top and bottom properties are left to their defaults(auto), and the parent element has text-align property set to center, the element does not keep it's position. CSS: #element { position: absolute; } #parent { text-align: center; width: 500px; height: 300px; } HTML: <div id="parent"> <span id="element">Test</span> </div> The span should remain centered within it's parent until the left or right properties are explicitly set. However, if we add an inline element or text before the span: <div id="parent"> Text or   or <span>some other inline element</span><span id="element">Test</span> </div> The element centers along with the elements/text before it. I've attached an example that shows the unexpected behavior that occurs if the position property was set to absolute via javascript. 228389 1 genetiq 2010-05-20 08:30:22 -0700 I can also confirm this bug in latest WebKit nightly build (r59821) 326599 2 karthikeyan.jambulingam 2010-12-24 06:25:20 -0800 The bug is still alive in Chrome 8.0 build , is there any work around other than adding a text or   to make it work. 445999 3 robert 2011-08-03 12:18:21 -0700 I haven't confirmed the test case against the patch there but I think this is related to 4860. 565004 4 robin 2012-02-25 12:26:09 -0800 The most minimal testcase I can make is: <!DOCTYPE html> <style> body { text-align: center; } span { position: absolute; } </style> <span>Test 867080 5 robert 2013-04-01 05:54:51 -0700 I don't think there's anything to fix here anymore. Would you mind confirming? 1967989 6 ahmad.saleem792 2023-07-25 01:48:05 -0700 I am unable to reproduce this bug in Safari 16.6 using attached test case and one from Comment 04 and it matches Chrome Canary 117. 42715 2009-11-08 10:38:18 -0800 2009-11-08 10:38:18 -0800 Reveals a rendering bug in webkit. Absolutely position, inline elements should remain centered until left or right properties are set. absolutepositioninline.htm text/html 1639 samail91 PCFET0NUWVBFIGh0bWwgUFVCTElDICItLy9XM0MvL0RURCBYSFRNTCAxLjAgVHJhbnNpdGlvbmFs Ly9FTiINCiJodHRwOi8vd3d3LnczLm9yZy9UUi94aHRtbDEvRFREL3hodG1sMS10cmFuc2l0aW9u YWwuZHRkIj4NCjxodG1sPg0KPGhlYWQ+DQo8dGl0bGU+QWJzb2x1dGVseSBwb3NpdGlvbmVkIGlu bGluZSBlbGVtZW50PC90aXRsZT4NCjxzdHlsZT4NCnNwYW4gew0KYmFja2dyb3VuZDogcmVkOw0K fQ0KaW5wdXRbdHlwZT0ndGV4dCddIHsNCmJvcmRlcjogMXB4IHNvbGlkICNkZWRlZGU7DQpwYWRk aW5nOiAzcHggM3B4IDNweCAxMTBweDsNCm1hcmdpbjogMXB4Ow0Kd2lkdGg6IDMwMHB4Ow0KfQ0K bGFiZWwgew0KcG9zaXRpb246IGFic29sdXRlOw0KYmFja2dyb3VuZDogYmx1ZTsNCmNvbG9yOiB3 aGl0ZTsNCnBhZGRpbmc6IDBweDsNCm1hcmdpbjogM3B4Ow0Kd2lkdGg6IDEwMHB4Ow0KdGV4dC1h bGlnbjogbGVmdDsNCn0NCjwvc3R5bGU+DQo8L2hlYWQ+DQo8Ym9keT4NCkVsZW1lbnQgd2l0aG91 dCBzaWJsaW5ncyAodGV4dCBlbGVtZW50cykuDQo8Y2VudGVyIHN0eWxlPSJiYWNrZ3JvdW5kOiBs aWdodGJsdWU7IHdpZHRoOiAyMDBweDsgaGVpZ2h0OiAyMHB4OyI+DQo8c3BhbiBzdHlsZT0icG9z aXRpb246YWJzb2x1dGU7Ij5pbmxpbmU8L3NwYW4+DQo8L2NlbnRlcj4NCkVsZW1lbnQgd2l0aG91 dCAmYW1wO25ic3A7IGJlZm9yZSBpdC4NCjxjZW50ZXIgc3R5bGU9ImJhY2tncm91bmQ6IGxpZ2h0 Ymx1ZTsgd2lkdGg6IDIwMHB4OyBoZWlnaHQ6IDIwcHg7Ij4NCjxzcGFuIHN0eWxlPSJwb3NpdGlv bjphYnNvbHV0ZTsiPmlubGluZTwvc3Bhbj4gVGV4dCBmbG93DQo8L2NlbnRlcj4NCkVsZW1lbnQg d2l0aCAmYW1wO25ic3A7IGJlZm9yZSBpdC4NCjxjZW50ZXIgc3R5bGU9ImJhY2tncm91bmQ6IGxp Z2h0Ymx1ZTsgd2lkdGg6IDIwMHB4OyBoZWlnaHQ6IDIwcHg7Ij4NCiZuYnNwOw0KPHNwYW4gc3R5 bGU9InBvc2l0aW9uOmFic29sdXRlOyI+aW5saW5lPC9zcGFuPiBUZXh0IGZsb3cNCjwvY2VudGVy Pg0KSmF2YXNjcmlwdCB0ZXN0LiA8YnV0dG9uIG9uY2xpY2s9ImRvY3VtZW50LmdldEVsZW1lbnRC eUlkKCdmb28nKS5zdHlsZS5wb3NpdGlvbiA9ICdhYnNvbHV0ZSc7Ij5HaXZlIGVsZW1lbnQgYWJz b2x1dGUgcG9zaXRpb25pbmc8L2J1dHRvbj4NCjxjZW50ZXIgc3R5bGU9ImJhY2tncm91bmQ6IGxp Z2h0Ymx1ZTsgd2lkdGg6IDIwMHB4OyBoZWlnaHQ6IDIwcHg7Ij4NCjxzcGFuIGlkPSJmb28iPmlu bGluZTwvc3Bhbj4gVGV4dCBmbG93DQo8L2NlbnRlcj4NCjxici8+DQpVc2VmdWwgZXhhbXBsZSB3 aXRob3V0IG5ic3AuDQo8Y2VudGVyIHN0eWxlPSJiYWNrZ3JvdW5kOiBsaWdodGJsdWU7IHdpZHRo OiA1MDBweDsiPg0KPGxhYmVsIGZvcj0iaW5wdXQxIj5QbGFjZWhvbGRlcjwvbGFiZWw+PGlucHV0 IHR5cGU9InRleHQiIGlkPSJpbnB1dDEiLz4NCjwvY2VudGVyPg0KV2l0aCBuYnNwLg0KPGNlbnRl ciBzdHlsZT0iYmFja2dyb3VuZDogbGlnaHRibHVlOyB3aWR0aDogNTAwcHg7Ij4NCiZuYnNwOw0K PGxhYmVsIGZvcj0iaW5wdXQyIj5QbGFjZWhvbGRlcjwvbGFiZWw+PGlucHV0IHR5cGU9InRleHQi IGlkPSJpbnB1dDIiLz4NCjwvY2VudGVyPg0KPC9ib2R5Pg0KPC9odG1sPg==