Bei variabler Breite div in div horizontal zentrieren?

Einklappen
X
 
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
  • pepe_007
    Contao-Nutzer
    • 15.06.2010
    • 19

    #1

    Bei variabler Breite div in div horizontal zentrieren?

    Hallo zusammen!
    Es geht um den kleinen News"ticker" auf der Startseite dieser Homepage: hier klicken (miese Performance dank Strato, kein Kommentar bitte )
    Ich hätte gerne den Bereich, in dem "Aktuelles:" und die jeweils neueste Nachricht drinsteht gerne innerhalb des main-Bereichs horizontal zentriert.
    Bei den bisherigen Recherchen bin ich darauf gestoßen, dass ich mit position:absolute den div mit der id="start-news" schonmal auf variable Breite umstellen kann - nur kriege ich ihn danach nicht zentriert ausgerichtet...
    Oder sollte ich besser die Elemente IN "start-news" zentrieren und dessen width:100% setzen? Nur mit text-align:center; hats schonmal nicht geklappt...
    Vielleicht kann mir jemand helfen, ich würde mich sehr freuen!
    Viele Grüße
    Pepe
  • thepixture
    Contao-Fan
    • 24.06.2009
    • 536

    #2
    Hallo pepe,

    so müsste es gehen

    Code:
    #start-news {
        margin-top: 10px;
        text-align: center;
    }
    #start-news h4 {
        display: inline;
        margin-top: 0;
        padding-right: 10px;
    }
    #start-news div.layout_simple {
        display: inline;
    
    }
    Die floats müsstet Du vorher bei der H4 und dem nachfolgendem Div raus nehmen.
    Grüße
    thepixture

    Kommentar

    • wotank
      Gesperrt
      • 01.12.2010
      • 321

      #3
      Elemente werden horizontal zentriert, indem man ihnen eine Breite und margin:0 auto; mit auf den Weg gibt.
      Es reicht wenn #start-news z.B. 400px Breite und margin:0 auto; zugewiesen bekommen.

      Warum die h4 und das andere div floaten hat sich mir nicht erschlossen, es hat bei der Zentrierung aber auch nicht gestört (mit Firebug getestet).

      Kommentar

      • thepixture
        Contao-Fan
        • 24.06.2009
        • 536

        #4
        @wotank: Das stimmt zwar erstmal, aber nach Deiner Methode wird nur #start-news zentriert, nicht aber dessen Inhalt. Und das ist auch nur solange zentriert, wie die Newsüberschrift über die volle Breite von #start-news geht. Bei kurzen Newsüberschriften würde der Text optisch immer mehr links stehen.

        Die beiden Elemente floaten, weil er die Newsüberschrift neben der Modulüberschrift haben wollte. Funktioniert aber mit meiner Methode auch und wird immer zentriert, egal wie lang der Text ist
        Grüße
        thepixture

        Kommentar

        • pepe_007
          Contao-Nutzer
          • 15.06.2010
          • 19

          #5
          Danke, thepixture, suuuper!!
          Für dich war's wahrscheinlich die leichteste Übung, aber mir hast du damit viele weitere Stunden des Suchens und Testens erspart! Es funktioniert einwandfrei, wie du sehen kannst. Die Sache mit display:inline muss ich mir merken, ist manchmal ja anscheinend die bessere Alternative zu float:left...

          @wotank: Genau das war das Problem, dass ja die Überschrift mal sehr lang und mal sehr kurz sein kann und ich nicht bei jeder neuen Nachricht die Breite neu anpassen wollte. Trotzdem auch dir danke für deine Hilfsbereitschaft!

          Kommentar

          • Spray
            Contao-Nutzer
            • 11.06.2013
            • 1

            #6
            Hier in dem Blogartikel wird das genau beschrieben:

            Mit CSS DIV in anderem DIV horizontal zentrieren.

            Viele Grüße!

            Kommentar

            Lädt...