bild per css zentrieren

    Hallo,


    ich habe das Problem, dass ich es nicht schaffe ein Bild zu zentrieren. Konkret handelt es sich um das template folio von joomlaplates. Bei diesem template ist der Bildschirm schon in zwei Hälften aufgeteilt. Links ist ein großer Slider-Bereich, links der content. Über dem slider liegt das Modul, in dem ein Logo eingebettet werden kann. Soweit so gut, das Modul beginnt dann bei 50 % des Bereiches. Das Logo befindet sich dann aber entsprechend beginnend bei der Hälfte im rechten Bereich. Wie kann ich das entsprechend anpassen?


    Der CSS Code vom Logo lautet:


    /* Logo and Offcanvas Desktop

    ========================================================================== */

    .logo * {

    margin: 0 !important;

    }

    .logo a,

    .logo a:hover {border:10; text-decoration:none;}


    .logo {


    left: 50%;

    top:50% ;

    position:absolute;

    z-index:1;



    in dem Logo-Modul lautet der code:


    ><img src="images/logo-website-2019_2.png" alt="" width="283" height="132" />


    Vielen Dank für Eure Hilfe!!!

    Hier noch ein Bild von der Ansicht

    Wenn dein Logo eine feste Größe hat, kannst du das in etwa mit diesen Anweisungen in der custom.css deines Templates erreichen:


    Code
    .logo {
  left: 50%;
  margin-left: -51px;
}

    ....wobei du die 51px durch die halbe Breite deines Logos ersetzen musst.


    Wenn das nicht passt, gilt Christians Hinweis: Bitte einen Link zum Problem posten.

    Ohne Link zur Site ist das fast unmöglich zu beantworten!

    Generell:

    CSS
    .logo * {
margin: 0 !important;
}

    Statt "important" versuche das hier:

    Code
    .logo * {
margin: 0 auto;
}

    Wenn das Logo in einem definierten Container liegt, wird es mittig ausgerichtet. Ob der Container drum herum da ist, kann ich dir nur mit einem Link zum Problem beantworten. ;)



    Axel

    Hi,
    wenn Du vom Logo links oben redest, dass ist über .uk-float-left links gefloatet und absolute positioniert.
    Du must der Klasse .logo also folgendes verpassen:


    Code
        margin: 0 auto;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);

    Nur mal so als Warnung, da das Template bestimmt ein Joomla-Framework (UI-Kit) verwendet kann es sein das die Änderungen am CSS nicht mehr dem entsprechen was Dir im WYSIWYG-Editor siehst entspricht.

    Grüße