• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Text in Div neben Bild vertikal zentrieren

H

HannemannMediaAG

Guest
Hallo,

nun habe ich schon so viel probiert und komme nicht auf den Trichter. Wie oben schon genannt möchte ich in den Text neben einen Bild vertikal zentrieren.

Mit line-height kann man in diesem Fall nichts machen, da die Überschrift ein- und zweizeilig ist.

Grüsse

Link zur Seite: http://hannemann-media.ch/clients/ndof_wp/

CSS des umschliessenden DIVs:
Code:
.footer-column-wrapper {
    margin: 0 auto;
    background: #ffffff;
    width: 1008px;
    height: auto;
    position: relative;
}

DIV mit img:
Code:
.footer-column-icon {
    background: url(img/Tickets.png) no-repeat;
    height: 100px;
    width: 100px;
    float: left;
}

DIV mit Überschrift:
Code:
.footer-column-headline {
    width: 185px;
    height: 100px;
    float: left;
    font-size: 29px;
    font-weight: lighter;
    display: table-cell;
    vertical-align: baseline;
    line-height: 30px;
    position: relative;
}
 
Werbung:
Werbung:
Hallo,

nun habe ich schon so viel probiert und komme nicht auf den Trichter. Wie oben schon genannt möchte ich in den Text neben einen Bild vertikal zentrieren.

Mit line-height kann man in diesem Fall nichts machen, da die Überschrift ein- und zweizeilig ist.

Grüsse

Link zur Seite: http://hannemann-media.ch/clients/ndof_wp/

CSS des umschliessenden DIVs:
Code:
.footer-column-wrapper {
    margin: 0 auto;
    background: #ffffff;
    width: 1008px;
    height: auto;
    position: relative;
}

DIV mit img:
Code:
.footer-column-icon {
    background: url(img/Tickets.png) no-repeat;
    height: 100px;
    width: 100px;
    float: left;
}

DIV mit Überschrift:
Code:
.footer-column-headline {
    width: 185px;
    height: 100px;
    float: left;
    font-size: 29px;
    font-weight: lighter;
    display: table-cell;
    vertical-align: baseline;
    line-height: 30px;
    position: relative;
}

So ähnlich sollte das funktionieren:

Code:
.entry-column {
  display:table;
}
.footer-column-icon {
  position:static; /* sinnloses relative aufheben */  
  float:none; /* sinnloses float aufheben */
  display:table-cell;
  vertical-align: middle;
}
.footer-column-headline{
  position:static; /* sinnloses relative aufheben */  
  float:none; /* sinnloses float aufheben */
  display:table-cell;
  vertical-align: middle;
}
 
@scbawik Ich habe bei
Code:
.entry-column
Code:
display: table;
weggelassen, so funzt es super! Danke.

@bdt600 Das hier ist ein Forum, wo auch Fragen gestellt werden. Ein Link zu Google ist nicht gerade hilfreich. Auch Du wirst manchmal vor einem Problem sitzen, wo die Antwort doch so einfach ist. Kennst das? Danke.
 
Werbung:
Das hier ist ein Forum, wo auch Fragen gestellt werden.
Das hast du zumindest richtig erkannt. Allerdings sollten Foren kein Ersatz für Eigeninitiative sein! Wenn du google benutzt hättest, hättest du eine Lösung schnellerfinden können, als in einem Forum einen Thread zu eröffnen.
Ein Link zu Google ist nicht gerade hilfreich.
Doch, aber da sind wir wieder bei der Eigeninitiative!
Auch Du wirst manchmal vor einem Problem sitzen, wo die Antwort doch so einfach ist. Kennst das?
Kenne ich, aber ich renne nicht sofort in ein Forum, ich suche erst mal selber. Und das hast du definitiv nicht getan, denn das die Lösung leicht zu finden war, habe ich dir gezeigt.
 
Zurück
Oben