Div Inhalte mehrfach zentrieren

htmler

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

Hier der Teil des Codes den ich testweise bearbeite:

PHP

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

und hier die dazugehörigen CSS Zeilen:

PHP

#outerbox{    
background-color: white;
height: 100px;
width: 350px;
margin: auto;


}
#innerbox{
display: inline-block;
background-color: blue;    }


#img {float: left;
height: 60px;
width: 60px;     
background-color: yellow;


}


.text1 {
background-color: green;     
float: left;     
font-size: 30px;    }

Alles anzeigen

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

explanator

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

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

CSS

Code

#outerbox {
    background-color: blue;
    height: 100px;
    width: 350px;
    margin: 0 auto;
}
#outerbox img {
    float: left;
    height: 60px;
    width: 60px;
    background-color: yellow;
}
#outerbox p {      
    font-family: Arial, san-serif;
    background-color: #008000;
    font-size: 30px;
    margin: 0;
}

Alles anzeigen

sauber strukturiert und im CSS findet man sich besser zurecht.

htmler

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

explanator

Zitat von htmler

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.

Tags