vertical-align bei div

[mxp]

Hallo miteinander.

Habe ein Problem mit CSS, und zwar:

Ich habe einen Button in Form eines <div></div> mit Größenangabe und alles. Und darin steht ein Text (ein Wort um genau zu sein). Allerdings will ich, dass der Text in der Mitte angezeigt wird, und nicht, dass er am oberen Rand bickt.

Vielleicht hab ich mich zu kompliziert ausgedrückt jetzt, hier ist auf jeden Fall der Code(ein Code sagt mehr als 1000 Wörter^^):

<div class="button"><b>Comm</b></div>

Und im Headbereich:

<style type="text/css">
<!--
.button { background:url(bilder/button.png); background-repeat:no-repeat; width:130px; height:30px; vertical-align:middle; }
-->
</style>

Und jetzt noch das Bild:

Wie ihr seht, klebt der Text am oberen Rand des Buttons, obwohl ich "vertical-align:middle" angegeben habe.

Woran liegt das, wie kann ich machen, damit der Text in der Mitte steht?

Danke schon mal im Vorhinen,
mfg
mxp

 

[Maxi]

Du kannst zum Beispiel noch folgendes einfügen zu den Style-Angaben:

padding-top: 12px;

Die Zahl 12 ist nur ein beispiel, die musst du selbst noch anpassen. Dadurch erhält der Text Abstand zum oberen Rand.

 

[gruenspan]

Wie ihr seht, klebt der Text am oberen Rand des Buttons, obwohl ich "vertical-align:middle" angegeben habe.

vertical-align ist imho nur auf Inline-Elemente und Tabellenzellen anwendbar und wird nicht vererbt.

 

[mxp]

Danke, hat mir sehr geholfen...

mfg
mxp

 

[gruenspan]

Is das jetzt ironisch gemeint, oder wie?

 

[mxp]

lol nein wie kommst du drauf dass das ironisch sein soll, hat mir ja wirklich sehr geholfen...^^

mfg
mxp

 

[Frank]

das problem bei dir ist, dass sich das vertical-align bei block-elementen nach der zeilen höhe ausrichtet.

Wenn du der zeile mit hilfe von line-height eine höhe von 30px zuweist und dann vertical-align anwendest dann geht es

.button { 
  background-image : url(bilder/button.png);
  background-repeat : no-repeat; 
  width : 130px; 
  height : 30px;
  line-height : 30px;
  vertical-align : middle; 
}

 

[matibaski]

Mach es so:

span.mitte {
margin-top:auto;
margin-bottom:auto;
padding-top:auto;
padding-bottom:auto;
}

<span class="mitte">Text in der Mitte</span>

So ging es bei mir immer.


MfG, matibaski

 

[RaxXxoR]

ist vielleicht ein bisschen komplizierter aber so mache ich es immer. also du hast jetzt den button bla bla. dann erstellst du darin noch ein div element wo du bei background-color "tranzparenz" einstellst und dann den text so variieren das er an der richtigen stelle steht. dann brauchst du bei jedem button einfach nur den gleichen style-code übernehmen. so mach ich es immer, klappt gut.