Bild in der mitte eines divs platzerien

[Picco]

hallo ihr lieben,
ich stehe gerade wirklich auf dem Schlauch.

Ich möchte ein img innerhalb eines divs mittig platzieren also von oben und unten den gleichen Abstand haben.

  
<div class="offer">  
 <a href="./foo.php" class="lightwindow" title="foo">foo  
  <img src="./images/foli/foo.jpg" alt="" />  
 </a>  
</div>  

Das Bild als Hintergrundbild des divs festzulegen geht nicht da schon ein Hintergrundbild verwendet wird.

Eine individuelle positionierung ist nicht erwünscht da dies bedeuten würde diese für jedes Bild einzeln vorzunehmen und das ist viel zu viel Arbeit.

die Lösung muss 100% w3c konform sein (es dürfen weder Fehler noch Warnungen auftreten).

Hat jm eine Idee?

[B4rnY]

Du könntest es von Javascript individuell erledigen lassen.

[Picco]

Du könntest es von Javascript individuell erledigen lassen.

aber das bedeutet doch auch das es für jedes einzeln erledigt werden muss oder? zumal es dann ohne js eine Katastrophe gibt

[ScaraX]

Wenn die Höhe des divs feststeht, kannst du es mit

  
.offer {  
  text-align: center;  
  line-height: [höhe des divs]  
}  
.offer img {  
  vertical-align: middle;  
}  

probieren!

MfG
ScaraX

[Picco]

.offer {
  text-align: center;
  line-height: [höhe des divs]
}
.offer img {
  vertical-align: middle;
}

  
Das macht das den a tag auf größe des divs somit ist das bild nun nichtmehr zu sehen.

[Gunnar Bittersmann]

@@Picco:

nuqneH

.offer {
  text-align: center;
  line-height: [höhe des divs]
}
.offer img {
  vertical-align: middle;
}

>   
> Das macht das den a tag auf größe des divs  
  
Nein, das tut es nicht. Es sei denn, du hast es für die Klasse "lightwindow" so festgelegt.  
  

> somit ist das bild nun nichtmehr zu sehen.  
  
?? Die vorgeschlagene Lösung tut genau, was du willst.  
  
Qapla'

-- 
Volumen einer Pizza mit Radius z und Dicke a: pi z z a

[Picco]

@@Picco:

nuqneH

.offer {
  text-align: center;
  line-height: [höhe des divs]
}
.offer img {
  vertical-align: middle;
}

> >   
> > Das macht das den a tag auf größe des divs  
>   
> Nein, das tut es nicht. Es sei denn, du hast es für die Klasse "lightwindow" so festgelegt.  
>   
> > somit ist das bild nun nichtmehr zu sehen.  
>   
> ?? Die vorgeschlagene Lösung tut genau, was du willst.  
>   
> Qapla'  
  
nein der Text im a Element UND das Bild bekommen die line-height: [höhe des divs] und somit schiebt sich dann das Bild aus dem A tag raus :( damit ist dann der Text (der nicht verschoben werden darf) in der mitte positioniert 

[Gunnar Bittersmann]

@@Picco:

nuqneH

aus dem A tag

Tag? Deppenleerzeichen?

damit ist dann der Text (der nicht verschoben werden darf) in der mitte positioniert

Text?

Qapla'

[Thomas Luethi]

Hallo,

Den Ansatz findest Du hier:
http://de.selfhtml.org/navigation/faq.htm#mittig_zentrierte_inhalte

Hintergrundinfos zur Positionierung mit CSS findest Du hier:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

Die Höhe des Bildes ist ja wohl bekannt und immer gleich?
Dann kannst Du die linke obere Ecke zuerst genau in der
Mitte des DIVs positionieren  - top:50%; left:50%; -
und dann noch um die halbe Breite nach links und um
die halbe Höhe nach oben verschieben.

Beispiel: Das Bild ist 400px breit und 300px hoch:

HTML:

<div id="spezial">  
  <img id="zentriert" alt="ALT-Text">  
</div>

CSS:

div#spezial  
 { position:relative; /* notwendig, damit sich das  
                         position:absolute beim Bild  
                         auf den DIV bezieht */  
  /* ... weitere Angaben wie Hintergrundbild u.s.w.*/  
}  
  
img#zentriert {  
  position:absolute;  
  top:50%;  
  left:50%;  
  width:400px;  
  height:300px;  
  margin-left:-200px;  
  margin-top:-150px;  
}

HTH, mfg
Thomas

[Wouzhuo]

hallo ihr lieben,
ich stehe gerade wirklich auf dem Schlauch.

Ich möchte ein img innerhalb eines divs mittig platzieren also von oben und unten den gleichen Abstand haben.

Eine individuelle positionierung ist nicht erwünscht da dies bedeuten würde diese für jedes Bild einzeln vorzunehmen und das ist viel zu viel Arbeit.

die Lösung muss 100% w3c konform sein (es dürfen weder Fehler noch Warnungen auftreten).

Hat jm eine Idee?

Ich denke du suchst das hier: http://www.webdesign-in.de/mts/vertikal-und-horizontal-zentrieren-ohne-tabelle/

[Wouzhuo]

Ähm... oder eher das: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

[Picco]

Ähm... oder eher das: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

nein am html aufbau lässt sich nicht so ohne weiteres rütteln :(

[Gunnar Bittersmann]

@@Picco:

nuqneH

<a href="./foo.php" class="lightwindow" title="foo">foo

▲▲▲
Was soll das "foo" an der Stelle?

Qapla'

[Picco]

@@Picco:

nuqneH

<a href="./foo.php" class="lightwindow" title="foo">foo
                                                        ▲▲▲
Was soll das "foo" an der Stelle?

Qapla'

das ist nur ein beispiel text das da später nicht foo und ./foo.php steht ist hoffentlich klar das ist ein platzhalter ;)

[Gunnar Bittersmann]

@@Picco:

nuqneH

das ist nur ein beispiel text das da später nicht foo und ./foo.php steht ist hoffentlich klar

Mir schon.

das ist ein platzhalter ;)

Im OP erwähntest du nicht, das außer dem Bild noch Text da wäre. Wie soll dieser positioniert sein?

Sammel dich erstmal und beschreibe ganau, was du willst. Dann sehen wir weiter.

Qapla'

[Picco]

Im OP erwähntest du nicht, das außer dem Bild noch Text da wäre. Wie soll dieser positioniert sein?

doch habe ich:
»»<div  class="offer">

<a href="./foo.php" class="lightwindow" title="foo">foo
<img src="./images/foli/foo.jpg" alt="" />
</a>

über dem img ist noch Text.

Sammel dich erstmal und beschreibe ganau, was du willst. Dann sehen wir weiter.

Ok ich gebe zu das habe ich vergessen aber ist die frage ob man das sagen muss wenn es heit dass, das BILD in der mitte positioniert werden soll :)

also schön noch mal:

• ein div mit einer festen Breite und Höhe ist gegeben
• in dem div sind Text und darunter 1 Bild
• Höhe, Breitung, Art des Bildes sind NICHT bekannt
• js ist nicht gestattet
• das gegebene html darf nicht verändert werden
• die Lösung muss 100% w3c konform sein (Warnungen sind auch nicht gestattet)
• das div hat bereits ein Hintergrundbild welches nicht verändert werden soll
• eine individuelle Lösung die für jedes div einzeln erledigt werden muss ist zu aufwändig

Positionieren sie das Bild in der Mitte des div ohne den text vom oberen rand des dives zu entfernen.

*uff* ich hoffe ich habe jetzt wirklich keine Fragen mehr offen gelassen :]

[Gunnar Bittersmann]

@@Picco:

nuqneH

• das gegebene html darf nicht verändert werden

Was sehr ärgerlich ist. Es ist ziemlich dumm, dass der Text nicht in einem eigenen Element steht.

Positionieren sie das Bild in der Mitte des div ohne den text vom oberen rand des dives zu entfernen.

div.offer  
{  
    display: table-cell;  
    position: relative;  
    text-align: center;  
    vertical-align: middle;  
}  
  
div.offer a  
{  
    color: transparent;  
    line-height: 0;  
    white-space: pre-line;  
}  
  
div.offer a:after  
{  
    color: black;  
    content: attr(title);  
    left: 1em;  
    line-height: normal;  
    position: absolute;  
    top: 1em;  
}

sollte deinen Wünschen recht nahe kommen.

Qapla'