.... ein Bild mittig auf eine Webseite zu setzen? Nervt mich jedes Mal tierisch aufs Neue..... ... wollt mich nur mal auskotzen, sorry. Danke für die Aufmerksamkeit.
Warum nicht eine neue eigene CSS Klasse anlegen und diese dann einfach immer für Bilder benutzen die zentriert sein sollen?
Ja, klar, das ist aber ungleich komplexer als einfach nur wie bei einem Text auf "zentriert" zu klicken. Zudem habe ich dann eine neue Klasse, sodass die Klasse img-responsive nicht mehr greift. Wird also immer komplizierter. Als Anwender will ich, wie beim Text auf "zentriert" klicken und gut ist. Aber das wünsche ich mir auch schon seit den späten 90ern....
Hallo Florian, das ist auch etwas, das mich immer genervt hat. Nun schreibe ich im Bild bei class zusätzlich zu img-responsive auch center-block dazu und das funktioniert. Vielleicht hilft dir das ja.
jetzt hast du aber alles irgendwie "doppeltgemoppelt". Und dein Bild ist trotzdem noch nicht zentriert. Das ist dein aktueller Code: Code: <div class="middich" style="text-align: center;"> <a href="https://www.matchashop.de/de/Matcha-von/"><img alt="Direkt zum matchashop" class="middich" src="images/Direkt-zum-Shop.png" style="margin: 2px; width: 202px; height: 63px;"></a> </div> 1. Möglichkeit ohne die Klasse middich: Code: <div style="text-align: center;"> <a href="https://www.matchashop.de/de/Matcha-von/"><img alt="Direkt zum matchashop" src="images/Direkt-zum-Shop.png" style="margin: 2px; width: 202px; height: 63px;"></a> </div> 2. Möglichkeit mit der Klasse middich: Code: <div class="middich" > <a href="https://www.matchashop.de/de/Matcha-von/"><img alt="Direkt zum matchashop" src="images/Direkt-zum-Shop.png" style="margin: 2px; width: 202px; height: 63px;"></a> </div> CSS: Code: .middich { display: flex; justify-content: center; align-items: center; }
Ich habe bei den Bildeigenschaften im Editor "display: block; margin-left: auto; margin-right: auto; text-align: center;" eingetragen und das Bild ist zentriert.
Finde eine CSS anlegen nicht wirklich komplex, vor allem nicht dann wenn ich diese einmal angelegte Klasse dann permanent für dutzende Bilder benutzen kann. Schau mal wie es Michaela Klaiber geschrieben hat, daran kann man sich wunderbar orientieren und die middich Klasse anlegen Responsive sollte mit diesem Zusatz auch gehen: Code: .middich img { max-width: 100%; height: auto; }
Ja, ihr habt alle recht mit dem was ihr schreibt. Und ja, CSS anlegen und zuweisen ist ja alles schön und gut. Und wirklich DANKE an alle Hilfestellungen! Aber wäre es nicht schön, wenn man im Texteditor einfach auf das Bild klickt, dann auf einen Button "zentrieren" und der Drops wäre gelutscht? Den Wunsch, dass Bilder auf Webseiten zentriert dargestellt werden sollen, gibt's doch schon so lange wie es HTML gibt.... ich wünsch mir einfach, dass das leichter geht und wundere mich, warum so eine ultragrundlegende Funktion nie Einzug ins W3C gehalten hat. "links" und "rechts" geht ja auch. Außerdem wollte ich mich auch einfach mal kurz aufregen Danke an alle!
Vielleicht hilft das ja. Einfacher html code, Objekt bezogen, mag ich auch am liebsten ohne CSS, da mit der Zeit ja unübersichtlich ;-) Beispiel: <p align=center><img src="xxx.jpg" alt="xxx" width="500" height="600"></p>
eher das Gegentel wenn du überall inline CSS nutzt, und was anpasst müsstest du alles kontrollieren. das dann aufwand Im CSS kannst auch Kommentare hinterlegen und vieles mehr an Struckturierungen machen. Zentrieren mit margin auto ist auch die Methode die ich am häufigsten als empfehlung gesehen habe also links rechts auto abstand wie oben schon jemand schrieb. und man kann auch eigene Class machen und mehrere Classen auf das Bid anwenden so das man weiß was welche macht wenn man sie entsprechend benennt.