Textausrichtung im <div> Element

[Bianca S.]

Guten Morgen,

Wiki und Suchfunktion haben mich leider nicht zum Ziel geführt.
Ich möchte in HTML-Dokumenten (Doktype ist 4.01 Transistional) den Inhalt eines <div>-Elementes ändern. Bisher dienten die <div>-Elemente als "Container" für Bilder.

So sah das dann aus:

<div id="topic_left" style="position:absolute; left:20px; top:188px; width:106px; height:250px; z-index:5">
<a name="events"><img src="images/veranstaltungen.gif" width="106" height="250" name="veranstaltungen" alt="Beispieltext"></a>
</div>

In diesen </div> Elementen sollen die Bilder nun durch <h2> Überschriften - also Text - ERSETZT werden. Diese sollen in den vorhandenen <div>-Elementen um 90° gedreht (das klappt) - und dann vertial und horizontal zentriert werden, also im <div>-Element genau mittig ausgerichtet sein (das klappt nicht!).

Meine Vorgehensweise:

Snip HTML:

<div id="topic_left" style="position:absolute; left:20px; top:188px; width:106px; height:250px; z-index:5">
<h2>Veranstaltungen</h2>
</div> 

Snip CSS:

h2 
{
	font-family: arizona, arial, verdana;
	font-size: 18px;
	transform: rotate(-90deg);
	text-align: center;
	vertical-align: middle;
	color: #670000;
}

Muss für einen Kollegen einspringen, der diese Dokumentation (keine Webseite) bei uns pflegt und längere Zeit ausfällt. Würde mich über einen Tipp freuen.

LG Bianca

[Rolf b]

Darf ich Dir diesen Artikel aus dem SelfHTML Wiki ans Herz legen?

Zentrierte Inhalte

Hab's grad man gefiddelt, sieht bei mir so aus:

<main>
<div id="topic_left">
<h2>Veranstaltungen</h2>
</div>
</main>

main {
  position:relative;
  width: 300px; height: 300px;
  background-color: #fcc
}
#topic_left {
	position: absolute;
	left:20px;   top:18px;   width:106px;   height:250px;
	z-index:5;
	background-color: #ccf;
	display: flex; align-items:center;justify-content:center;
}

h2 
{
	font: bold 18px arizona, arial, verdana;
	transform: rotate(-90deg);
	color: #670000;
	background-color: white;
}

Die Hintergrundfarben dienen nur der Visualisierung, wo welche Box ist. Deine Font-Tags habe ich zusammengefasst.

Die Magie ist die Flexbox. Wenn das in deinem Kontext nicht funktionieren sollte, bietet der verlinkte Artikel noch reichlich Alternativen an.

Rolf

[Matthias Apsel]

Hallo Rolf b,

Deine Font-Tags habe ich zusammengefasst.

Ich musste lange suchen, um zu erkennen, was du meinst. Ein font-Element kommt nämlich gar nicht vor. Du hast aber die zusammenfassende Eigenschaft font verwendet 😉 Dabei hast du die Angabe einer generischen Schriftfamilie ebenso vergessen wie Bianca. Also
font: bold 18px arizona, arial, verdana, sans-serif;

Bis demnächst
Matthias

[Bianca]

Hallo Rolf b ,

ganz lieben Dank für die Mühe, die Du Dir gemacht hast (jsfiddle).
Bin heute das erste Mal sonntags im Büro. Dafür habe ich aber die Ruhe, mich dieser Sache zu widmen.

Im Gegensatz zu Matthias konnte ich gleich nachvollziehen, was Du meinst. Und die Umsetzung hier hat auch gut geklappt. Der Verweis zu den > zentrierten Inhalten < war sehr hilfreich.

Matthias Aspel:
Wie wichtig ist denn die Angabe einer generischen Schriftfamilie?
Und das Font-Element wurde doch ins CSS ausgelagert, ist somit da. Kann Deiner Aussage nicht so ganz folgen.

LG Bianca

[beatovich]

hallo

generische Schriftart

Es gibt ja mehrere Typen von generischen Schriftarten. Du darfst nicht davon ausgehen, dass der Default Typ für deinen serifenlosen Font auch ein sans-serif Font ist.

[Matthias Apsel]

Hallo Bianca,

Und das Font-Element wurde doch ins CSS ausgelagert, ist somit da. Kann Deiner Aussage nicht so ganz folgen.

Das ist kein font−Element. Das ist eine Eigenschaft. Rolf hat lediglich eine falsche Vokabel verwendet.

font-Elemente gab es früher einmal. (<font>text </font>)

Bis demnächst
Matthias

[beatovich]

hallo

Doktype ist 4.01 Transistional

Doktor auf Siliziumbasis?

[Bianca]

Genau!
Rechtschreibfehler passieren unter Zeitdruck schon mal. Die darfst Du auch gerne behalten. ;o)