ITADN

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

#1535OpenDFelten 创建于 2025-11-28
bug
D
DFeltencommented
<!-- Thank you for using flutter_widget_from_html! If you have found a bug or if our documentation doesn't have an answer to what you're looking for, then fill out the template below. --> ## 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. <!-- You should provide as much info as possible so that we can reproduce the problem. --> <details> <summary>HTML</summary> <!-- Paste the HTML in full that is not working as expected --> ```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> ``` </details> <details> <summary>`HtmlWidget` configuration (SliverList) -> Not working</summary> <!-- Paste how you are configuring `HtmlWidget` in your app code, e.g.: HtmlWidget( html, onTapUrl: (url) => _someSpecialLogic(url), textStyle: _someCustomStyle, ); --> ```dart 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, ), ], ), ); } ``` </details> <details> <summary>`HtmlWidget` configuration (Column) -> Working</summary> <!-- Paste how you are configuring `HtmlWidget` in your app code, e.g.: HtmlWidget( html, onTapUrl: (url) => _someSpecialLogic(url), textStyle: _someCustomStyle, ); --> ```dart 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, ), ), ), ); } ``` </details> <details> <summary>Tesing environment</summary> <!-- Finally, paste the output of running `flutter doctor -v` here. --> ``` [✓] 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. ``` </details> ## Expected results <!-- What did you want to see? --> ## Actual results <!-- What did you see? Include a screenshot and/or recording would help tremendously. -->
0 条评论