CSS Problem - mittig

  • Guten Morgen,

    ich hoffe Ihr könnt mir helfen.

    Ich würde gerne unter folgender Seite:
    http://www.tierarzt-meth.de/de/?Itemid=243

    die Teambilder immer mittig anzeigen lassen. Sobald ich richtung Handyformat gehe..werden diese linksbündig.
    Ich hab nun schon versucht mit verschiedenen PX abfragen da was zu machen, aber entweder stehe ich auf dem Schlauch oder sonstwas :)

    Grüße
    Tobi

    Einmal editiert, zuletzt von Arne Drews (8. September 2017 um 09:10) aus folgendem Grund: MOD: Link korrigiert

  • Eine Idee hätte ich, aber ob die für dich umsetzbar ist, kann ich nicht sagen. In der Simulation mit FireFox - Inspektor läuft es auf jeden Fall
    Schritt 1:
    Der gesamte Code beginnend mit den ersten '<figure class="effect-image-3 one-half" style="text-align: left;">' bis hin zum allerletzten '</figure>' muss umschlossen werden von einem <div> mit den Formaten 'style="margin: 0px auto; text-align: center;" '
    also so...

    HTML
    <div style="margin: 0px auto; text-align: center;">
    <figure class="effect-image-3 one-half" style="text-align: left;">...</figure>
    ...
    ...
    <figure class="effect-image-3 one-half" style="text-align: left;">...</figure>
    </div>


    Damit wird die Grundlage geschaffen, dass sich die Bilder in einem sich selbst zentrierenden (margin -> auto) Container befinden und dort und sich dort zentriert orientieren (text-align -> center)

    Schritt 2:
    Die vorhanden Formate, die jetzt dafür sorgen, dass sich die Bilder linksbündig sortieren müssen geändert werden.
    Entweder durch direkte Änderung der Werte bei [class*='effect-image'] im 'template.css' - was ich aber ohne nähere Kenntnisse des Seite nicht empfehlen würde.
    Oder durch Einfügen eines Inline-Styles in den Quellcode!

    HTML
    <style type="text/css">
    .effect-image-3.one-half {
       float: none !important;
       display: inline-block;
       width: 31%;
       min-width: 217px;
    }
    </style>


    Mit den Zahlenwerten kann man natürlich noch etwas 'spielen', um es richtig passend zu machen.
    Einen Versuch ist es wert - bei mir funktioniert das so.

    if(!sleep)

    {$sheep++;}