Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS - Problem beim DIV ausrichten mit mergin

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    CSS - Problem beim DIV ausrichten mit mergin

    Hallo Leute,

    ich habe einen DIV Container der hat eine Breite von 100% und eine Höhe von 89%.

    In diesem DIV wird nun ein weiterer DIV eingebunden, welcher eine Breite von 600px und eine Höhe von 500px hat.

    Diesen DIV möchte ich mittels CSS und margin-left : auto; sowie margin-top: auto; genau mittig ausrichten, dieses klappt jedoch nicht.

    margin-top wird vollkommen ignoriert und margin-left positioniert den DIV viel zu weit nach rechts.

    Wie kann ich den DIV Container richtig central plazieren?

    Danke für eure Hilfe. Gruß der Litter
    Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir.
    [URL]http://www.lit-web.de[/URL]
    Stichworte: -
  • #2
    Die Problematik liegt glaube ich in den %-Angaben, aber vielleicht hilft das als Ansatz: http://jsfiddle.net/ea8vdpoy
    Competence-Center -> Enjoy the Informatrix
    PHProcks! • Einsteiger freundliche Tutorials • PreComposed Packages

    Kommentar

    • #3
      margin-top: auto kannst du meines Wissens nach zum vertikal Zentrieren komplett vergessen. Statt dessen mit top: 50% und margin-top: -250px arbeiten. Sprich top: 50% positionierst du die obere Kante des div's vertikal mittig. Dann verschiebst du es mit margin-top: -250px genau um die Hälfte seiner Höhe (0.5 * 500px) nach oben, so dass es dann mittig positioniert wird.

      Kommentar

      • #4
        [OT]

        Ich finde die Webwelt sollte langsam von diesen zentrierten Modals wegkommen. Was darum für ein Aufwand getrieben wird, nur um ein altes Prinzip zu emulieren…
        [COLOR="#F5F5FF"]--[/COLOR]
        [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
        „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
        [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
        [COLOR="#F5F5FF"]
        --[/COLOR]

        Kommentar

        • #5
          cheat sheet: http://css-tricks.com/centering-css-complete-guide/
          I like cooking my family and my pets.
          Use commas. Don't be a psycho.
          [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

          Kommentar

          • #6
            Netter Link!

            Kommentar

            • #7
              Mit nettem Fazit.
              [COLOR="#F5F5FF"]--[/COLOR]
              [COLOR="Gray"][SIZE="6"][FONT="Georgia"][B]^^ O.O[/B][/FONT] [/SIZE]
              „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
              [URL="http://www.php.de/javascript-ajax-und-mehr/107400-draggable-sorttable-setattribute.html#post788799"][B]Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“[/B][/URL][/COLOR]
              [COLOR="#F5F5FF"]
              --[/COLOR]

              Kommentar

              • #8
                Das aber nur für bestimmte Browser korrekt ist. Tja zum Glück darf ich scheintote IE-Versionen meist ignorieren

                Kommentar

                • #9
                  http://codepen.io/chriscoyier/pen/BvdgL

                  Kommentar

                  • #10
                    Glaub das wird im Link von rudygotya ebenfalls vorgestellt.

                    Kommentar

                    • #11
                      Beste Möglichkeit zum Zentrieren eines DIVs find ich bisher diese:
                      (für ein Div der Breite 500px)

                      Code:
                      #divname {
width:500px;
left:50%;
margin-left:-250px;
}

                      Kommentar

                      • #12
                        Na wenn Du die feste Breite hast, ist das wohl so am einfachsten:
                        Code:
                        DIV { width:500px; margin:0 auto; }
                        Die Problematik ist aber, daß die 500px nicht bekannt sind, sondern das DIV ne Prozentangabe als Breite hat.
                        Probier Deine Lösung mal damit
                        Competence-Center -> Enjoy the Informatrix
                        PHProcks! • Einsteiger freundliche Tutorials • PreComposed Packages

                        Kommentar

                        Vorherige Weiter
                        Lädt...
                        X