Bild wird nicht zentriert

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • In deinem Stylesheet ist aligncenter nicht definiert:

    Code
    <img width="200" height="200" alt="" 
    src="http://www.sparblog.com/wp-content/uploads/2008/07/jam.jpg" 
    title="jam" class="[COLOR=Red]aligncenter[/COLOR] size-full wp-image-382"/>

    Dafür aber das hier:

    Code
    img.center, img[align="center"] {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    somit würde das bei dir nur zentriert, wenn das Bild so drin ist:

    Code
    <img width="200" height="200" alt="" 
    src="http://www.sparblog.com/wp-content/uploads/2008/07/jam.jpg" 
    title="jam" class="[COLOR=Green][B]center[/B][/COLOR] size-full wp-image-382"/>

    Entweder, du änderst das an jedem Bild oder du änderts dein o.g. Stylesheet auf aligncenter ab.

  • Code
    img.center, img[align="center"] {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    das in die style.css wo du es wiederfindest

    dann refreshen beim Browser und sie müßten mittig sein

    lg

  • Ich hab dir ja den Ausschnitt aus der HTML Ansicht deines Beitrags oben gezeigt mit dem Bild. Dort solltest du aligncenter gegen center austauschen.
    Da du das aber dann bei allen Bildern machen musst, hatte ich vorgeschlagen, die style.css (wie Monika schon schrieb) zu ändern und zwar so:

    Code
    img.[COLOR=Green][B]aligncenter[/B][/COLOR], img[align="center"] {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
  • Gleich noch eine Ergänzung, um den Rahmen abzuschalten:

    Code
    img.aligncenter, img[align="center"] {
        display: block;
        margin-left: auto;
        margin-right: auto;
        [COLOR=Green][B]border[/B][/COLOR][COLOR=Green][B]:0pt none;[/B][/COLOR]
     }

    Ergänzung: und für denn Fall der Frage nach den anderen Bildern:

    Code
    img.alignleft, img[align="left"] {
        float:left;
        margin:2px 10px 5px 0px;
         [COLOR=Green][B]border[/B][/COLOR][COLOR=Green][B]:0pt none;[/B][/COLOR]
    
    
    }


    und

    Code
    img.alignright, img[align="right"] {
        float:right;
        margin:2px 0px 5px 10px;
         [COLOR=Green][B]border[/B][/COLOR][COLOR=Green][B]:0pt none;[/B][/COLOR]
    
    
    }
  • Hallo,
    ich habe auch das Problem das mein Bild nicht Zentriert dargestellt wird.
    Wenn ich in Wordpress einen Beitrag schreibe und das Bild einfüge, kann ich die Ausrichtung festlegen.
    Habe dann Zentriert gewält und das Bild wird schon Zentriert dargestellt.

    Wenn ich jetzt aber auf die Webseite gehen, dann wird es linksbündig ausgerichtet, obwohl es in WP
    schon zentriert wurde und auch dargestellt wird. Nur auf der Webseite stimmt das ergebnis nicht.

    Ich habe auch die o.a. Vorschöäge ausprobiert, aber es klappt damit auch nicht.
    Woran kann das liegen?

  • Link zur Problemstelle, ich denke dein css stimmt nicht.

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

  • In deinem Stylesheet ist aligncenter nicht definiert:

    Code
    <img width="200" height="200" alt=""
    src="http://www.sparblog.com/wp-content/uploads/2008/07/jam.jpg"
    title="jam" class="[COLOR=Red]aligncenter[/COLOR] size-full wp-image-382"/>

    Dafür aber das hier:

    Code
    img.center, img[align="center"] {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    somit würde das bei dir nur zentriert, wenn das Bild so drin ist:

    Code
    <img width="200" height="200" alt=""
    src="http://www.sparblog.com/wp-content/uploads/2008/07/jam.jpg"
    title="jam" class="[COLOR=Green][B]center[/B][/COLOR] size-full wp-image-382"/>

    Entweder, du änderst das an jedem Bild oder du änderts dein o.g. Stylesheet auf aligncenter ab.


    Ich habe das wie ober - für ein einzelnes Bild geändert aber klappt nur recht/links mitte nicht.
    und wo die Stylesheet liegt zu ändern weiß ich noch nicht ..

    es geht um die Bayernkarte.. http://seniorennetzwerk-bayern.de/wordpress/

    ich weiß das Thema ist alt aber ggf weiß noch wer ne lösung ;)
    danke
    peter

  • Versuche mal nachfolgendes im Dashboard unter Design - Customizer - Zusätzliche CSS einzufügen:

    Code
    .tablepress img {
        margin: 0 auto;
        }

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

  • Versuche mal nachfolgendes im Dashboard unter Design - Customizer - Zusätzliche CSS einzufügen:

    Code
    .tablepress img {
        margin: 0 auto;
        }

    Habe ich gemacht, was soll ich sagen ES KLAPPT :-) weiß nicht warum aber es zentriert...

    Lieben Dank
    Peter

  • Nunja margin (Aussenabtand):0 ist oben und unten = 0, und auto links und rechts = zentriert ;-)

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

  • Hallo!

    Ich habe im Prinzip das gleiche Problem. Seit dem letzten größeren WP Update werden meine Bilder auf meinen beiden Blogs (unterschiedliche Designs) nicht mehr mittig dargestellt. Zur Ansicht, es handelt sich um http://www.mission-cashflow.de und http://www.backpackershome.de.

    Ich musste bisher noch nie zusätzliches CSS hinzufügen, bin deswegen mit der Thematik nicht so vertraut. Ich habe dann versucht das oben stehende nachzuvollziehen, aber es brachte keine Änderung.

    Könnte sich das jemand kurz anschauen und mir sagen, was ich noch probieren könnte?

    Danke vorab!

    CU Ingo.

    Enjoy life and live the adventure!

  • Versuche mal im Text-Widget das Bild zu zentrieren.

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

  • Danke für den Tipp.

    Im Widget und im Editor werden alle Bilder korrekt mittig dargestellt. Erst bei der Ansicht direkt auf dem Blog sind diese nicht mehr mittig.

    CU Ingo.

    Enjoy life and live the adventure!

  • Es sieht so aus, als würde dir da das Plugin 'Jetpack' etwas die Quere kommen und die Formatierung dieser Bilder zu manipulieren.
    Versuche mal... aber bitte dringend im zusätzlichen CSS, damit diese Anweisung ganz am Schluss, hinter allen anderen CSS Dateien gelesen wird... folgendes einzutragen.

    HTML
    .jetpack-lazy-images-js .jetpack-lazy-image {
      display: block;
    }


    Sollte das nicht wirken, dann auch mal

    HTML
    .jetpack-lazy-images-js .jetpack-lazy-image {
      display: block !important;
    }


    versuchen.
    Das ist übrigens auf beiden Seiten das selbe Problem.

  • Genial! Das war es. Gleich die erste Änderung brachte das gewünschte Ergebnis und nun sind alle mittig deklarierten Bilder auch wirklich wieder mittig. Toll!

    Danke vielmals für die schnell und effektive Hilfe.

    CU Ingo.

    Enjoy life and live the adventure!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!