CSS Problem

[3_of_8]

Morgen.

Ich hab grad ein kleines CSS-technisches Problem.

Ich habe folgende div-Klassen definiert:

Code:

div.menuitem {
  display: block;
  width: 150px;
  height: 20px;
  margin-left: 6px;
  text-align: center;
  vertical-align: middle;
  background: url("images/menuitem_bg.png") no-repeat top left;
}

div.menucat {
  display: block;
  height: 24px;
  width: 162px;
  margin-top: 16px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  background: url("images/cat_bg.png") no-repeat top left;
}

Der HTML Code sieht dann so aus:

Code:

  <div class="menucat">Allgemein</div>
  [url="?contentid=2"]<div class="menuitem">FAQ</div>[/url]
  [url="?contentid=3"]<div class="menuitem">Entwicklungsstatus</div>[/url]

Das Problem ist, dass das ganze so aussieht wie im Anhang, und da ist das absolut gar nicht in der Mitte.

[Matze]

CCC 4 You:

Die Eigenschaft vertical-align beeinflusst die vertikale Ausrichtung von Text in einer Zeile, bezogen auf das Elternelement, das ein Inline-Element sein muß. Man kann damit also kleineren Text an größerem Text oder auch an Grafiken ausrichten - nicht aber die vertikale Positionierung in einem Blockelement (z.B. div-Element) direkt bestimmen. Außerdem kann Text damit vertikal in Tabellenzellen positioniert werden. Der Normalwert ist dabei »baseline« - die Grundlinie.

Wie man das allerdings dann machen muss, kann ich dir auch nicht sagen. Notfalls müsste es mit padding gehen.

[3_of_8]

Geht da ein span?

[S2B]

Ich würde in so einem Fall einfach ein entsprechendes padding einstellen. Wenn du es mit vertical-align machen willst/musst, müsstest du mit der CSS-Eigenschaft line-height herumspielen, denn vertical-align bezieht sich auf diese Eigenschaft.

Edit: Und ja, span ist ein Inline-Element (das Standard-Inline-Element).