img horizontal zentrieren

[ottogal]

Hallo in die Runde,

ich weiß schon, das Thema ist schon oft durchgekaut worden. Ich habe aber eine Verständnisfrage:

So klappt das Zentrieren:
 <img .... style="display: block; margin: 0 auto;" />

Warum aber geht es nicht, wenn ich diese style-Regeln in die CSS-Datei verbanne? Also so:

<img .... class="mittig" />

wobei in der CSS-Datei steht

~~~css img.mittig
   {
   display: block;
   margin: 0 auto;
   }

  
Das müsste doch aufs Gleiche herauskommen?  
  
Danke  
ottogal  

[Gunnar Bittersmann]

Hello out there!

Das müsste doch aufs Gleiche herauskommen?

Bis auf die Spezifität der Selektoren.

Hast du noch andere Regeln für das 'img'-Element im Stylesheet, deren Spezifität zwischen 1000 und 0011 liegt?

See ya up the road,
Gunnar

[ottogal]

Hello Gunnar,

die CSS-Regel lautet vollständig

img.mittig  
  {  
  clear: both;  
  display: block;  
  margin: 0 auto;  
  }

Das Bild bekommt allerdings explizit noch Breite und Höhe zugewiesen. Die nicht funktionierende Variante

<img src="...." alt="" class="mittig" style="width: ...px; height: ...px;" />

hat nach meiner Rechnung die Spezifität 1011.
Für die funktionierende Variante

<img src="...." alt="" style="display: block; margin: 0 auto; width: ...px; height: ...px;" />

bekomme ich die Spezifität 1001 heraus.

Was folgt nun daraus?

ottogal

[ottogal]

Sorry Gunnar,

es lag an einem reichlich trivialen Fehler. Da offenbar die Klasse "mittig" nicht gefunden wurde, checkte ich die CSS-Dateien und fand einen Tippfehler bei einer Pfadangabe. :-0

Danke aber fürs Mitraten (im Sinn von Ratgeben)
ottogal

[Gunnar Bittersmann]

Hello out there!

img.mittig

{
  clear: both;
  display: block;
  margin: 0 auto;
  }

>   
> Das Bild bekommt allerdings explizit noch Breite und Höhe zugewiesen. Die nicht funktionierende Variante  
>   
> `<img src="...." alt="" class="mittig" style="width: ...px; height: ...px;" />`{:.language-html}  
>   
> hat nach meiner Rechnung die Spezifität 1011.  
  
Rechne nochmal! Die Spezifität der Angaben für 'clear', 'display' und 'margin' ist eine andere als die für 'width' und 'height'.  
  
"In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0." [[CSS21 §6.4.3](http://www.w3.org/TR/CSS21/cascade.html#specificity)]  
  
  

> Für die funktionierende Variante  
>   
> `<img src="...." alt="" style="display: block; margin: 0 auto; width: ...px; height: ...px;" />`{:.language-html}  
>   
> bekomme ich die Spezifität 1001 heraus.  
  
Rechne nochmal! ...  
  
See ya up the road,  
Gunnar

-- 
„Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ ([Kirsten Evers](https://forum.selfhtml.org/?t=158750&m=1033264))

[ottogal]

<img src="...." alt="" class="mittig" style="width: ...px; height: ...px;" />

hat nach meiner Rechnung die Spezifität 1011.

Rechne nochmal!

Also 1031 ?

<img src="...." alt="" style="display: block; margin: 0 auto; width: ...px; height: ...px;" />

bekomme ich die Spezifität 1001 heraus.

Rechne nochmal! ...

Und hier 1000 ?

Gruß
ottogal

[Gunnar Bittersmann]

Hello out there!

<img src="...." alt="" class="mittig" style="width: ...px; height: ...px;" />

Also 1031 ?

Ist

Die Spezifität der Angaben für 'clear', 'display' und 'margin' ist eine andere als die für 'width' und 'height'.

so schwer zu verstehen?

"In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0." [CSS21 §6.4.3]

Also was kommt für 'width' und 'height' heraus, wo diese Regeln im 'style'-Attribut doch keine Selektoren haben?

Die  Angaben für 'clear', 'display' und 'margin' hingegen wissen nichts von einem 'style'-Attribut.

See ya up the road,
Gunnar

[ottogal]

Ich komme immer nur wieder auf 1011 - hilfst du mir weiter drauf?
ottogal

[Gunnar Bittersmann]

Hello out there!

Ich komme immer nur wieder auf 1011 - hilfst du mir weiter drauf?

'width' und 'height' stehen im 'style'-Attribut. (Warum eigentlich? 'style'-Attribute sind blöd; sie trennen nicht Struktur und Layout, was ja der Sinn von CSS ist.) “[…] values of an element's "style" attribute […] have no selectors, so a=1, b=0, c=0, and d=0.” [CSS21 §6.4.3] (Sagte ich doch schon.) Macht also 1000.

'clear', 'display' und 'margin' hingegen wissen nichts von einem 'style'-Attribut. (Sagte ich doch schon.) Die Spezifität der Angaben für 'clear', 'display' und 'margin' ist eine andere als die für 'width' und 'height'. (Sagte ich doch schon.) Der Selektor ist 'img.mittig', ein Element, ein Attribut: a=0, b=0, c=1, and d=1. Macht also 0011.

See ya up the road,
Gunnar

[ottogal]

Hello Gunnar,

'width' und 'height' stehen im 'style'-Attribut. (Warum eigentlich? 'style'-Attribute sind blöd; sie trennen nicht Struktur und Layout, was ja der Sinn von CSS ist.)

Das ist mir bewusst. Mein Problem ist, dass die Bilder verschiedene Abmessungen haben, weshalb ich die Werte von width und height nicht im Stylesheet festschreiben kann. Sie werden individuell vom CMS eingesetzt, und das macht es eben mit dem style-Attribut.

“[…] values of an element's "style" attribute […] have no selectors, so a=1, b=0, c=0, and d=0.” [CSS21 §6.4.3] (Sagte ich doch schon.) Macht also 1000.

Das war mir mittlerweile klar.

Der Selektor ist 'img.mittig', ein Element, ein Attribut: a=0, b=0, c=1, and d=1. Macht also 0011.

Hier dachte ich, weil eben _auch_ ein style-Attribut vorhanden ist, dass da a=1 sein müsste.

Wieder was gelernt, danke!

Gruß
ottogal

[MudGuard]

Hi,

Rechne nochmal! Die Spezifität der Angaben für 'clear', 'display' und 'margin' ist eine andere als die für 'width' und 'height'.

Verwirr ihn nicht so. Specificity hat nichts mit den Eigenschaften zu tun, sondern mit den Selektoren.

cu,
Andreas

[Gunnar Bittersmann]

Hello out there!

Rechne nochmal! Die Spezifität der Angaben für 'clear', 'display' und 'margin' ist eine andere als die für 'width' und 'height'.

Verwirr ihn nicht so. Specificity hat nichts mit den Eigenschaften zu tun, sondern mit den Selektoren.

Naja, deshalb sagte ich ja nicht „Spezifität der '...'-Eigenschaften“, sondern „Spezifität der Angaben für ...“

Da bei den Angaben für 'width' und 'height' kein Selektor da ist, fiel mir keine bessere Formulierung ein.

See ya up the road,
Gunnar