Skip to content

Center images via display block and margin auto not working with RenderMode.sliverList #1535

@DFelten

Description

@DFelten

Steps to Reproduce

It's possible to center an image via style="display: block; margin: 0 auto;". This is working for RenderMode.column. But as soon as I changed the render mode to sliverList, the image is no longer centered.

HTML
<img style="display: block; margin: 0 auto;" src="https://www.monsterdealz.de/app/uploads/2025/11/IMG_0025-276x600.jpg"
    alt="" width="276" height="600" />

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat necessitatibus quod ratione earum praesentium
    consequuntur tempora alias nulla recusandae accusamus aliquam atque doloremque nesciunt assumenda, autem ea laborum
    consectetur. Numquam!</p>
`HtmlWidget` configuration (SliverList) -> Not working
import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';

const kHtml = '''
<img style="display: block; margin: 0 auto;" src="https://www.monsterdealz.de/app/uploads/2025/11/IMG_0025-276x600.jpg"
    alt="" width="276" height="600" />

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat necessitatibus quod ratione earum praesentium
    consequuntur tempora alias nulla recusandae accusamus aliquam atque doloremque nesciunt assumenda, autem ea laborum
    consectetur. Numquam!</p>
''';

class CustomWidgetBuilderScreen extends StatelessWidget {
  const CustomWidgetBuilderScreen({super.key});

  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(
      title: const Text('CustomWidgetBuilderScreen'),
    ),
    body: const CustomScrollView(
      slivers: [
        HtmlWidget(
          kHtml,
          renderMode: RenderMode.sliverList,
        ),
      ],
    ),
  );
}
`HtmlWidget` configuration (Column) -> Working
import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';

const kHtml = '''
<img style="display: block; margin: 0 auto;" src="https://www.monsterdealz.de/app/uploads/2025/11/IMG_0025-276x600.jpg"
    alt="" width="276" height="600" />

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat necessitatibus quod ratione earum praesentium
    consequuntur tempora alias nulla recusandae accusamus aliquam atque doloremque nesciunt assumenda, autem ea laborum
    consectetur. Numquam!</p>
''';

class CustomWidgetBuilderScreen extends StatelessWidget {
  const CustomWidgetBuilderScreen({super.key});

  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(
      title: const Text('CustomWidgetBuilderScreen'),
    ),
    body: const SingleChildScrollView(
      child: Padding(
        padding: EdgeInsets.all(8.0),
        child: HtmlWidget(
          kHtml,
        ),
      ),
    ),
  );
}
Tesing environment
[✓] Flutter (Channel stable, 3.35.7, on macOS 26.1 25B78 darwin-arm64, locale de-DE) [1.553ms]
    • Flutter version 3.35.7 on channel stable at /Users/danielfelten/fvm/versions/3.35.7
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision adc9010625 (5 weeks ago), 2025-10-21 14:16:03 -0400
    • Engine revision 035316565a
    • Dart version 3.9.2
    • DevTools version 2.48.0
    • Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop, no-enable-windows-desktop, enable-android, enable-ios, cli-animations, enable-lldb-debugging

[!] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [4,9s]
    • Android SDK at /Users/danielfelten/Library/Android/sdk
    • Emulator version 36.1.9.0 (build_id 13823996) (CL:N/A)
    • Platform android-36, build-tools 35.0.0
    • Java binary at: /Users/danielfelten/.sdkman/candidates/java/current/bin/java
      This JDK is specified in your Flutter configuration.
      To change the current JDK, run: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment JBR-17.0.12+1-1087.25-jcef (build 17.0.12+1-b1087.25)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 26.1.1) [3,9s]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 17B100
    • CocoaPods version 1.16.2

[✓] Chrome - develop for the web [144ms]
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2025.1) [144ms]
    • Android Studio at /Users/danielfelten/Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 21.0.6+-13391695-b895.109)

[✓] IntelliJ IDEA Ultimate Edition (version 2025.1.3) [142ms]
    • IntelliJ at /Users/danielfelten/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 87.1
    • Dart plugin version 251.27623.5

[✓] VS Code (version 1.105.1) [19ms]
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.120.0

[✓] VS Code (version 1.107.0-insider) [19ms]
    • VS Code at /Applications/Visual Studio Code - Insiders.app/Contents
    • Flutter extension version 3.123.20251030

[✓] Connected device (4 available) [7,1s]
    • iPhone 16 Pro von Daniel (wireless) (mobile) • 00008140-000C71910253001C            • ios            • iOS 26.2 23C5044b
    • iPhone 17 Pro (mobile)                       • C8B00EE3-5817-4C45-85E2-79288D340473 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-26-1 (simulator)
    • macOS (desktop)                              • macos                                • darwin-arm64   • macOS 26.1 25B78 darwin-arm64
    • Chrome (web)                                 • chrome                               • web-javascript • Google Chrome 142.0.7444.176

[✓] Network resources [259ms]
    • All expected network resources are available.

! Doctor found issues in 1 category.

Expected results

Image

Actual results

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions