Die liebe mitte in CSS?

[Paradise]

Guten Morgen,

jetzt muss ich doch nochmal fragen wegen der mitte.

Im momend richte ich mit zb

<center><img src="images/xxx.gif" width="400px" height="106px" style="margin-bottom:20px" alt="xxx"/></center>

oder bei mehreren Bildern in einem div mit:

div.images {text-align:center; display:inline; width:100%;}

aus.

Nur ist <center> oder align=center ja nicht wirklich valid. Oder ist das zweite ok und ich muss um einzelne Bilder auch ein div machen?
Wie soll man es den sonst machen? Ich hab im ganzen web nichts gefunden...

[Guin]

Nur ist <center> oder align=center ja nicht wirklich valid.

Das kommt darauf an, welches html du meinst.

"text-align:center" ist valide fuer alle html Versionen.

Mittig (horizontal)ausrichten kann man etwas mit
margin-right:auto; margin-left:auto;
oder in kurz
margin:0 auto;

[Boris]

Etwas genauer - alle Blockelemente (div, p, h1, ul usw) werden mit margin: 0 auto; zentriert.

Alle Inlineelemente (span, a, img etc.) zentriert man mit text-align: center;

Willst du also in einem DIV, dass die Bilder darin zentriert werden, musst du diesem DIV ein text-align: center; geben ... weiter nichts. Kein display: inline und auch kein width: 100%;

[Paradise]

Also weder

<p style="margin:0 auto;">
{xevidwidebotplus}video/people/timea_majorova_fer.flv|false|320|292|Fitness Expo Roma|0|0|0x4186cb|images/stories/timea_majorova/profil/video_timea_majorova_fer.jpg{/xevidwidebotplus}
</p>

noch

<span  style="text-align:center;">
{xevidwidebotplus}video/people/timea_majorova_1.flv|false|320|270|Timea Majorova|0|0|0x4186cb|images/stories/timea_majorova/profil/video_timea_majorova_1.jpg{/xevidwidebotplus}
</span>

setzt das Video in die mitte...

Ich steig bald auf Tabellen um, hmpf.
Das einzige was mich davon abhält meine Seite mit Content/Artikeln zu füllen ist das ausrichten in der mitte.
"text-align: center;" ist ja auch nicht für Bilder usw. gedacht.
Richtig wäre ja

<div style="width:300px; display:block; margin-left: auto; margin-right:auto;">
<p style="margin:0px;"><img src="bild1.jpg" style="margin:2px;" alt="Bild 1" /><img src="bild2.jpg" style="margin:2px;" alt="Bild 2" /><img src="bild3.jpg" style="margin:2px;" alt="Bild 3" />
</p>

<p style="margin:0px;"><img src="bild1.jpg" style="margin:2px;" alt="Bild 1" /><img src="bild2.jpg" style="margin:2px;" alt="Bild 2" /><img src="bild3.jpg" style="margin:2px;" alt="Bild 3" />
</p>

Aber das geht eben nur wenn man die Bildgröße hat. Bei mir werden die thumbs automatisch erstellt und wenn ich mal ein Bild austauche und es hat ein anderes Seitenverhältniss, dann stimmt die width angabe vom div nicht mehr...

[Paradise]

Huhu, hat keiner mehr nen Tip oder etwas beizutragen

[Boris]

Beides ist falsch - wenn du in einem Blockelement (<p>) Inlineelemete zentrieren willst, musst du text-align benutzen, also:

<p style="text-align: center;">
...
</p>

[Paradise]

Da steht aber hier http://aktuell.de.selfhtml.org/artikel/css/ausrichtung/
und in dem Buch das ich grade vor mir hab steht auch das man
"text-align: center;" nicht für bilder und so nehmen soll.

[Boris]

Lies mal richtig, was da steht. Man soll text-align: center nicht dazu nutzen, um Blockelemente zu zentrieren. Ein Bild ist kein Blockelement, sondern ein Inlineelement.

Lies das hier zum Thema, das passt eher: http://de.selfhtml.org/css/eigenscha...htm#text_align

text-align bezieht sich nicht nur auf Textinhalte, sondern auf alle inline dargestellten Elemente (wie z.B. <img>)

Für brave Browser ist es daher auch korrekt, Inlineelemente (wie Bilder) mit text-align: center zu zentrieren. Anders geht es nicht, sofern du die Eigenschaft des Bildes nicht änderst.

[steffenk]

Boris, willst Du nicht mal einen Kurz-Tutorial über block-und inline-Elemente schreiben? Ich denke da haben viele Probleme, und es ist für die Behandlung im CSS essentiell wichtig.

[Boris]

Gebt mir die Zeit ...

[Paradise]

Das ganze ist sehr verwirrend. Aber ich bedanke mich mal dafür das einem hier geholfen wird.

Im mom habe ich die Bilder hier
http://www.paradise-bodies.com/content/view/33/63/
so

<div style="text-align: center;">
<p>  
{mosimage h=100 iar=0}
{mosimage h=100 iar=0}
{mosimage h=100 iar=0}
</p> 
<p>
{mosimage h=100 iar=0}
{mosimage h=100 iar=0}
{mosimage h=100 iar=0}
{mosimage h=100 iar=0}
</p>
</div>

angeordnet. Nun lese ich aber

Inline-Elemente dürfen Text und weitere Inline-Elemente aber in der Regel keine Block-Elemente enthalten.

Hm, aber p ist doch ein Block?

Und die Videos werden so eingebaut

<div style="text-align: center;">
{xevidwidebotplus}video/people/michelle_baker.flv|false|320|270|Michelle Baker|0|0|0x4186cb{/xevidwidebotplus}
</div>

ist diese Videomodul nun ein Inline oder Block?

Und wenn Bilder Inline sind, dann sollte ja

<img style="text-align: center;" src="images/stories/michelle_baker/profil/main.png" />

für ein einzelnes Bild richtig sein...

[steffenk]

ich versuchs mal kurz:

Blockelemente dürfen sehr wohl weitere Blockelemente enthalten, aber es gibt Ausnahmen, die nicht valide sind.
So eignen sich zur Schachtelung divs, aber z.B. ein p darf nicht innerhalb eines p sein.

Was nicht geht: blockelemente innerhalb von inline-Elementen.

Typische Blockelemente: div, p, h1-h6
Typische Inlineelemente: span,a

genaueres erfährtst Du hier: http://www.css4you.de/elemente.html

Ich habe mich hier auf Container beschränkt, ein img z.B. ist ja ein Einzelelement und hat keine "Kinder"

Die Anweisung style="text-align: center;" bezieht sich immer auf die Kindelemente und nicht auf das Element selbst. Wenn Du also ein Bild (oder beliebiges Einzelelement) zentrieren willst, so muss diese Anweisung in das Elternelement.
Ist es jetzt klarer ?

[Paradise]

Soweit so gut. Jetzt habe ich aber noch ein Problem mit Boxen die sich an den Text anpassen.

<div class="boxroblue" style="width:400px">
<div class="boxloblue">
<div class="boxlublue">
<div class="boxrublue">
<div class="boxinhalt">            
<p>BoxBoxBoxBox</p>
</div>
</div>
</div>
</div>
</div>

css dazu:

div.boxroblue {background: #227ab4 url(../images/mod_tr_lightS.png) top right no-repeat}
div.boxloblue {background: url(../images/mod_tl_lightS.png) top left no-repeat;}
div.boxlublue {background: url(../images/mod_bl_lightS.png) bottom left no-repeat;}
div.boxrublue {background: url(../images/mod_br_lightS.png) bottom right no-repeat;}
div.boxinhalt {margin:0; padding:5px;}
div.boxinhalt p {margin:0; padding-bottom:5px;}

Ich möchte diese Box zentrieren. Mache ich aber ein <div style="text-align: center;"> drumherum, wird die Box nicht zentriert, aber der Text in ihr...

[Boris]

Ich dreh gleich am Rad ...

Ein DIV ist ein Blockelement. Und ein Blockelement zentriert man mit margin: 0 auto;

Lies doch mal, was man dir schreibt und versuch es zu verstehen. Ständig das Gleiche zu sagen ist irgendwie doof.

[belimo]

ein img z.B. ist ja ein Einzelelement und hat keine "Kinder"

Ein img mit Kindern: http://www.gesunde-kinder.at/gesunde...startseite.jpg

Und ein Blockelement zentriert man mit margin: 0 auto;

Er meint damit du musst dem äussersten div das margin: 0 auto verpassen. Das 0 bezieht sich auf top und bottom, das auto auf left und right.

Warum ich hier poste:
Wenn ich ein div-tag habe, und darin ein kinderloses img. Gibt es eine möglichkeit, dieses vertikal zu zentrieren? Ich versuchte bis jetzt halt einfach padding-top und bottom. Dafür lass ich halt die Höhe weg. Klappt auch, finde ich nur etwas doof. ein vertical-align: middle klappt leider auch nicht...