Div Inhalte mehrfach zentrieren

  • Hallo zusammen!


    Ich ärgere mich schon seit gestern mit einem Problem rum, welches schon mehrfach besprochen wurde, wo die Lösungen mir leider nicht helfen...
    Ich möchte auf einer Seite eine (zentrierte) Box anzeigen, in der wiederum ein Bild und ein Text nebeneinander (zusammen jedohc zentriert angezeigt werden sollen). Irgendwie habe ich das Gefühl, dass sich bei meinen Versuchen irgendwelche Eigenschaften überschnitten haben oder ich zu viel von meinen div Bereichen erwartet habe :-D


    Hier der Teil des Codes den ich testweise bearbeite:


    PHP
    1. <div id="outerbox">
    2. <div id="innerbox">
    3. <img src="http://politik.stugen.uni-bremen.de/wp-content/uploads/2013/06/3715158_m3mst1w564h376q75v42315_RN-Sonne-A41.jpg" id="img" />
    4. <p class="text1"; style="font-family: Arial">Mein Text</p>
    5. </div>
    6. </div>


    und hier die dazugehörigen CSS Zeilen:



    hat jemand nun einen Tipp wie ich am besten


    1. "innerbox" innerhalb von "outerbox" zentriere ?
    2. das Bild mit dem nebenstehenden Text innerhalb von "innerbox" zentriere?


    Ich nehme gerne Links zu passenden Artikeln/Beiträgen an, die mir hier weiterhelfen könnten :)


    Viele Grüße


    htmler

  • Du brauchst keine 2 DIVs, ein Div reicht und das zentriert du mit CSS margin:0 auto;
    Auf Inlinestyles solltest du komplett verzichten.
    Ein IMG Element braucht immer ein Alt Attribut.
    Dein Sonnenbild solltest du mit einem Bildbearbeitungsprogramm verkleinern, es ist viel zu gross.


    Alles in allem kann man das so lösen:


    HTML

    HTML
    1. <body>
    2. <div id="outerbox">
    3. <img src="http://politik.stugen.uni-bremen.de/wp-content/uploads/2013/06/3715158_m3mst1w564h376q75v42315_RN-Sonne-A41.jpg" alt="Bild einer Sonne">
    4. <p>Mein Text</p>
    5. </div>
    6. </body>


    CSS


    sauber strukturiert und im CSS findet man sich besser zurecht.

  • Danke für deine Antwort explanator!


    Habe das mal kurzerhand eingefügt und nun habe ich zwar die outerbox zentriert, jedoch nicht den Inhalt. Ich möchte, dass sich das Bild und die Schrift in der outerbox zusätzlich zentrieren. Hast du vielleicht noch einen Rat wie ich das umsetzen kann?


    - - - Aktualisiert - - -


    ich habe ja auch deswegen eine zusätzliche div Box erstellt, in die ich mein Bild und meinen Text eingefügt habe, um anschließend die zusätzliche Box mit dem Inhalt zu zentrieren :)


  • ich habe ja auch deswegen eine zusätzliche div Box erstellt, in die ich mein Bild und meinen Text eingefügt habe, um anschließend die zusätzliche Box mit dem Inhalt zu zentrieren :)


    Das brauchst du nicht. du kannst noch tausend boxen drumherum machen, und wirst dein Ziel nicht erreichen. du solltest dich besser mit den Grundlagen von textelementen auseinandersetzen insbesondere text-align, display: inline und display:inline-block sowie Line-height.
    ein Diiv ist immer ein Blockelement, eine P ebenso und ein IMG ist ein Inline-Block.


    Solange du diese Zusammenhänge nicht verstehst wird das nie etwas.