✔ Textinhalt von oben und unten zentrieren

[cruiser187]

Hallo zusammen,

habe folgendes Problem. Ich möchte einen Text in einem div von oben und unten zentriert haben. Hier erstmal mein Code:

CSS:

#navi {
background-image: url(../bilder/navi.gif);
height:40px;
}

HTML:

<div id="navi">Text</div>

Wenn ich den Text mit Padding oder Margin nach unten setzen will, wird auch das Hintergrundbild wiederholt oder es passiert garnichts.

Weiss jemand was ich falsch mache?

Grüße

 

[Maik]

Hi,

falls es sich um einen einzeiligen Text handelt, tausch einfach die height-Eigenschaft gegen line-height aus.

Wenn du es über die padding-Eigenschaft versuchen möchtest, muss der gesetzte Wert für den vertikalen Innenabstand von der height-Angabe subtrahiert werden, da gemäß dem CSS-Boxmodell u.a. die padding-top- / padding-bottom- und height-Eigenschaft zusammen die Höhe einer Box ergeben.

Aus diesem Grund wiederholt sich bei dir auch das Hintergrundbild, da das Element nun höher als 40px dargestellt wird.

 

[cruiser187]

Vielen Dank, ich hab jetz einfach die height Eigenschaft kleiner angegeben wie das eigentliche Hintergrundbild und mit Padding dann mittig gestellt. Mit dem zusatz background-repeat:no-repeat; wiederholt sich das hintergrundbild auch nich.