Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS Div-Inhalt vertikal zentrieren

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS Div-Inhalt vertikal zentrieren

    Code:
    #village {
    	background-color: green;
    	position: absolute;
    	overflow: scroll;
    	height: 100%;
    	width: calc(100% - 462px);
    }
    
    #overview {
    	height: calc(100% - 50px);
    	margin-top: 24px;
    	margin-bottom: 24px;
    	background-image: url("graphic/village.jpg");
    	-webkit-background-size: 100% auto;
    	background-repeat: no-repeat;
        background-position: center;
    }
    Dieser Teil ist innerhalb #overview und der ist innerhalb von #village
    Code:
    <img style='margin: 25%; width: 10%; position: relative;' src='graphic/buildings/main.png'>
    Meine Seite ist in drei Spalten unterteilt. Die dritte (#village) passt sich dem Rest des Bildschirms an. In #village, existiert #overview, dort werden die Gebäude (als imgs) angezeigt.
    Das Problem ist schwer zu beschreiben, aber ich versuche es: Lasse ich die Seite laden, während mein Browser normal groß ist, ist alles gut. Ändere ich die Größe meines Browsers nun in der Breite, benehmen sich die Bilder so, als hätte ich die Größe gleichzeitig in der Höhe verändert.
    Was ich also bräuchte wäre eine Art vertical-align damit die Elemente in #overview sich auch dem Hintergrund anpassen, wenn die Größe des Browsers verändert wird. Das Hintergrundbild ist nämlich immer vertikal zentriert.

    Ich hoffe das war irgendwie verständlich

  • #2
    Hallo

    Ich hoffe das war irgendwie verständlich
    Leider nicht. Zur Problemlösung reicht weder deine Beschreibung noch deine Quellcodeschnipsel.

    Am besten wäre ein Link zur Seite.

    So ist eine konkrete Hilfe leider nicht möglich.

    Gruss

    MrMurphy

    Kommentar


    • #3
      Vielleicht hilft dir das hier weiter? http://css-tricks.com/centering-css-complete-guide/
      Die erste von mir erstellte Homepage: Wurzel der Liebe - Verein zu Förderung von Sozialprojekten weltweit

      Kommentar


      • #4
        Zitat von MrMurphy Beitrag anzeigen
        Hallo



        Leider nicht. Zur Problemlösung reicht weder deine Beschreibung noch deine Quellcodeschnipsel.

        Am besten wäre ein Link zur Seite.

        So ist eine konkrete Hilfe leider nicht möglich.

        Gruss

        MrMurphy
        Dachte ich mir..
        https://vid.me/36oP

        Kommentar

        Lädt...
        X