Picco: Bild in der mitte eines divs platzerien

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?

  1. Du könntest es von Javascript individuell erledigen lassen.

    1. 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

  2. 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

    1. .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.
      
      1. @@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
        
        1. @@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 
          
          1. @@Picco:

            nuqneH

            aus dem A tag

            Tag? Deppenleerzeichen?

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

            Text?

            Qapla'

            --
            Volumen einer Pizza mit Radius z und Dicke a: pi z z a
  3. 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

  4. 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/

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

      1. Ä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 :(

  5. @@Picco:

    nuqneH

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

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

    Qapla'

    --
    Volumen einer Pizza mit Radius z und Dicke a: pi z z a
    1. @@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 ;)

      1. @@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'

        --
        Volumen einer Pizza mit Radius z und Dicke a: pi z z a
        1. 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 :]

          1. @@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'

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