Bild und Text vertikal zentrieren?

[DinoX]

Hallo liebe Leute,

ich möchte erreichen, dass das Bild und auch Text vertikal zentriert sind.
Das Bild habe ich mit "vertical-align: middle;" zentrieren können aber Text nicht.

Was muß ich bitte ändern, damit der Text auch vertikal zentriert wird?

Im ZIP-Anhang habe ich die HTML-Datei und ein Bildchen beigefügt.

Besten Dank im Voraus!

Viele Grüße,
Dino

 

[tombe]

Ich hänge die geänderte "title.html" hier dran.

Die wohl wichtigste Änderung ist das du für die Klasse "vcenter" das Attribut "line-height" mit der Höhe des Bildes angibst und dann noch beim Bild "float: left;".

Schau dir die geänderte Datei an bzw. vergleiche sie mit deiner Datei.

Gruß Thomas

 

[DinoX]

Hi tombe,

erstmal vielen Dank für Deine Antwort.
Ich habe mir die Unterscheide angeschaut.

Ich habe jetzt bei .vcenter die line-height auf 80px geändert.
Die Bildgröße soll nicht geändert werden. Das Bild soll sich bei der Änderung der Höhe von line-height automatisch anpassen bzw. vertikal zentrieren.
Ist das möglich?

<style>
.menuTitle {
    background-color: #EFFF79;
    border-bottom: 1px solid #000000;
    border-radius: 3px 3px 0 0;
    border-top: 1px solid #000000;
    color: #000000;
    font-weight: 900;
    padding: 6px;
    text-align: left;
    vertical-align: middle;
}
.box2 {
    border-bottom: 1px solid #000000;
    border-left: 1px solid #000000;
    border-radius: 0 0 3px 3px;
    border-right: 1px solid #000000;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.8);
    padding: 6px 10px;
    vertical-align: middle;
}
.center {
    margin: auto;
    position: relative;
	vertical-align: middle;
    width: auto;
}

img {
    border: 0 none;
	float: left;
 	margin-right: 10px;
}

.vcenter {
    font-size: 12px;
    margin: 0px;
    line-height: 80px;
}

</style>

<div class="menuTitle box2 ">
	<div class="center">
	<img src="transportation_service.png">
	<p class="vcenter">Service</p>
	</div>
</div>

Viele Grüße,
Dino

 

[tombe]

...Das Bild soll sich bei Änderung der Höhe von inline-heigth ändern...

Verstehe ich jetzt nicht. "inline-height" muss doch immer so hoch sein wie das Bild hoch ist damit der Text mittig zum Bild angeordnet wird und nicht umgekehrt. Der Text ist mit 12px Schriftgröße ja nicht höher als das Bild.

 

[DinoX]

Hi tombe,

ich meine folgendes... Ich möchte die Höhe line-height: dynamisch (möchte es hinterher ändern und der Text und das Bild sollen sich automatisch zentrieren) ändern.

In der neu angehängten Datei steht line-height: 80px;
Der Text ist jetzt vertikal zentriert, aber das Bild nicht.
Wenn es geht, wäre es schön wenn durch Änderung von line-height das Bild sich auch zentrieren wird.

Ich hoffe Du verstehst mich...

Beste Grüße,
Dino

 

[tombe]

Also die Angabe von "line-height" bezieht sich auf dem Text nicht auf das Bild.
Hier muss immer die Höhe des Bildes angegeben werden damit der Text sich vertikal mittig zum Bild ausrichtet. Nicht umgekehrt!!

Auch wenn die Meinungen da oft auseinander gehen. Wie wäre es wenn du dafür einfach eine Tabelle nahmen würdest. Da wäre das alles überhaupt kein Problem!?