inhalt im div mittig positionieren

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

  • inhalt im div mittig positionieren

    hallo,

    ich habe eine div box die ein bild und einen kurzen, einzeiligen text enthält. beides soll mittig angezeigt werden. horizontal klappt es aber vertikal nicht.
    einen festen wert für die positionierung kann ich nicht nehmen, da die bilder unterschiedlich groß sind. es werden mehrere boxen hinter ein ander angezeigt.

    hier der code:
    HTML-Code:
    <div class="box">
    	<a href="images/bild.jpg" rel="lightbox" title="text"><img src="images/thumbnails/bild.jpg" alt="" /></a><br />
    	text
    </div>
    css:
    HTML-Code:
    .box {
    	float:left;
    	width:128px;
    	height:150px;
    	text-align:center;
    	vertical-align:middle;
    }
    Erfahrungen vererben sich nicht jeder muss sie allein machen.

  • #2
    Hallo,

    Zitat von joextra Beitrag anzeigen
    da die bilder unterschiedlich groß sind
    Dann geht es mit CSS alleine nicht*. Von Layout-Tabellen rate ich auch ab. Bleibt noch ein onload-Handler für die img-Elemente…

    Gruß,

    Amica

    ___
    * Mit display: table* zwar schon, aber da spielen nicht alle Browser mit.
    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
    Super, danke!
    [/COLOR]

    Kommentar


    • #3
      mit display: table habe ich es schon versucht, aber hat auch nicht geklaptt.

      >> Dann geht es mit CSS alleine nicht
      das ist blöd. hätte ich vielleicht gleich auf tabellen setzen sollen. damit müsste es ja klappen.
      Erfahrungen vererben sich nicht jeder muss sie allein machen.

      Kommentar


      • #4
        Zitat von joextra Beitrag anzeigen
        hätte ich vielleicht gleich auf tabellen setzen sollen. damit müsste es ja klappen.
        Das schon, aber das ist soooo 90er…

        Eigentlich macht man das gar nicht.
        [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
        Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
        Super, danke!
        [/COLOR]

        Kommentar


        • #5
          Eigentlich macht man das gar nicht.
          deswegen habe ich ja auch das div benutzt
          allerdings bringt es mir ja nichts wenn es sich nicht so darstellen lässt wie ich es will
          Erfahrungen vererben sich nicht jeder muss sie allein machen.

          Kommentar


          • #6
            Zitat von joextra Beitrag anzeigen
            wenn es sich nicht so darstellen lässt wie ich es will
            Der erwähnte onload-Handler kommt für dich nicht in Frage?
            [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
            Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
            Super, danke!
            [/COLOR]

            Kommentar


            • #7
              genau, was meinst du mit diesen "onload-Handler"? was soll der machen?
              Erfahrungen vererben sich nicht jeder muss sie allein machen.

              Kommentar


              • #8
                Zitat von joextra Beitrag anzeigen
                genau, was meinst du mit diesen "onload-Handler"? was soll der machen?
                Anhand der Bildgröße die Position so berechnen, dass es auch vertikal zentriert ist.
                [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                Super, danke!
                [/COLOR]

                Kommentar


                • #9
                  ich habe aber nicht nur ein bild sondern auch text. zudem ist das doch auch aufwändig.
                  Erfahrungen vererben sich nicht jeder muss sie allein machen.

                  Kommentar


                  • #10
                    Zitat von joextra Beitrag anzeigen
                    ich habe aber nicht nur ein bild sondern auch text.
                    Das könnte man dadurch lösen, dass man Bild und Text in noch einen Container packt, wenn man das will.

                    Zitat von joextra Beitrag anzeigen
                    zudem ist das doch auch aufwändig.
                    Nicht wirklich, man müsste nur die height-Property setzen, wenn man es so macht, wie ich es grad im Kopf habe. Mein Ansatz basiert auf diesem Prinzip.
                    [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                    Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                    Super, danke!
                    [/COLOR]

                    Kommentar


                    • #11
                      gut, wenn ich das so mache, müsste ich alles noch mal in einen div legen. bei über 50 boxen ist mir das doch zu viel. ich lass es so. trotzdem danke
                      Erfahrungen vererben sich nicht jeder muss sie allein machen.

                      Kommentar


                      • #12
                        Zitat von joextra Beitrag anzeigen
                        gut, wenn ich das so mache, müsste ich alles noch mal in einen div legen.
                        Das wäre eine Variante, aber der 50%-Trick würde in abgewandelter Form auch ohne ein zusätzliches div funktionieren. Dann muss der onload-Handler zwei Properties statt einer setzen.
                        [COLOR="DarkSlateGray"]Hast du die [COLOR="DarkSlateGray"]Grundlagen zur Fehlersuche[/color] gelesen? Hast du Code-Tags benutzt?
                        Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
                        Super, danke!
                        [/COLOR]

                        Kommentar

                        Lädt...
                        X