Icon vertikal zentrieren

[molex]

Hallo zusammen

Ich habe ein kleines CSS Problem. Ich habe folgende Box erstellt:

<div class="textBox" style="width: 50%; border: 1px solid #000; padding: 5px;">
    <div class="icon" style="float:left; padding-right: 5px; margin-top: 80px">
        <img src="icon_96.png" alt="" />
    </div>
    
    <div class="content" style="margin-left: 106px">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
        labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
        et ea rebum.</p>

        <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
        ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
</div>

Das Problem ist die vertikale Zentrierung des Icons. Dies löse ich im Moment mit einer margin-top, was aber sehr statisch ist. Wenn ich den Text nur ein wenig abändere, kann ich da wieder rumdrehen, bis das Icon wieder in der Mitte ist.

Kann man das irgendwie eleganter lösen?

Danke und Gruss,
molex

 

[Timmer]

probiers mal so...

<div class="textBox" style="width: 50%; border: 1px solid rgb(0, 0, 0); padding: 5px; position: relative;">
    <div class="icon" style="padding-right: 5px; position: absolute; top: 50%; margin-top: -48px;">
        <img src="http://www.programedia.ch/images/upload/requestRequestList_1302079962.png" alt="">
    </div>
    
    <div class="content" style="margin-left: 106px">
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
        labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
        et ea rebum.</p>

        <p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
        ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
        dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
</div>

Edit: Habe der Textbox das Attribut 'position:relative;' hinzugefügt und dem Icon 'position:absolute;', dann habe ich 50% Abstand zum oberen Rand eingestellt und die Hälfte der Höhe des Icons davon nochmal abgezogen. 'float:left;' brauchst du nicht mehr. Verstanden? ^^

 

[molex]

Funktioniert wunderbar.

Vielen Dank :)

Gruss,
molex

 

[threadi]

Muss das Icon dort in einem div gefangen sein? Ich würde empfehlen es als Hintergrundbild einzufügen. Dieses kann per background-position auch vertikal zentriert werden. Die absolute Positionierung ist nicht immer von Vorteil.