nicht angemeldet
Problem beim Ausrichten
Hallo ihr lieben...
ich habe schon gesehen, daß es mehrere Beiträge zu dem folgenden Thema gibt, habe aber keine befriedigende Antwort gefunden..:
Ich versuche Text in einer div-box vertical mittig auszurichten...
hatte eigentlich gedacht ich schreibe einfach vertical-align:middle mit in das style attribut.. aber das hat nicht geklappt...
hab auch nochmal nachgelesen... daß es im Verhältnis zu irgendetwas anderem klappt... hab ich aber ganz ehrlich nicht so richtig verstanden...
Also vielleicht kann mir jemand helfen:
ist es möglich, text oder grafiken in einer div-box vertical mittig auszurichten???
und wann setzt man vertical-align ein? nur in Tabellen??
-
Hallo!
Ich versuche Text in einer div-box vertical mittig auszurichten...
hatte eigentlich gedacht ich schreibe einfach vertical-align:middle mit in das style attribut.. aber das hat nicht geklappt...
"text-align:center;" im div!
Gruß
Viennamade-
Hallo!
Meine Antwort ist falsch, ich hab über "vertikal" drübergelesen ...
Tut leid
Viennamade
-
-
Hallo,
ist es möglich, text oder grafiken in einer div-box vertical mittig auszurichten???
Ja, aber die DIV-Box muss eine definierte Hoehe haben, die
groesser ist als die des Inhalts, den Du zentrieren willst.Gib dem DIV mal einen sichtbaren Rahmen, damit
Du siehst, wie gross er ist:div { border:1px dotted red; }
und wann setzt man vertical-align ein? nur in Tabellen??
Nein, ganz allgemein fuer Block-Level-Elemente.
Das spezielle an Tabellenzellen ist, dass man darin
auch mit (veraltetem) HTML Dinge vertikal zentrieren
kann und dass dies Anfaengern und veralteten Browsern
leichter faellt.
<td valign="middle">Vielleicht gibt Dir meine Seite ein paar Ideen:
http://www.tiptom.ch/homepage/faq.html?q=tabzentriertGruesse,
Thomas
--
Bitte keine Mails mit Fachfragen - dafuer gibt es das Forum!
Ich mag es, wenn URLs verlinkt sind (</faq/#Q-19>).
Oft gestellte PHP-Fragen beantwortet die dclp-FAQ bestens: http://www.dclp-faq.de/-
Hi,
und wann setzt man vertical-align ein? nur in Tabellen??
Nein, ganz allgemein fuer Block-Level-Elemente.
Nein, gerade für block-Elemente nicht:
'vertical-align'
Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial: baseline
Applies to: inline-level and 'table-cell' elementsNachzulesen unter http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/-
Hallo Andreas,
Danke fuer die Korrektur.
Nachzulesen unter http://www.w3.org/TR/REC-CSS2/visudet.html#propdef-vertical-align
Wieder was gelernt bzw. ein alter persoenlicher
Aberglaube aus der Welt geschafft! ;-)Ob es wohl etwas bringt, ein DIV (oder sogar BODY) mit
display:table-cell;
zu einer "Tabellenzelle" zu machen, damit man dann mit
vertical-align:middle;
deren Inhalt vertikal zentrieren kann?
Ich werde es ausprobieren und meine Seite entsprechend ergaenzen.Freundliche Gruesse,
Thomas
-
Hi,
Ob es wohl etwas bringt, ein DIV (oder sogar BODY) mit
display:table-cell;
zu einer "Tabellenzelle" zu machen, damit man dann mit
vertical-align:middle;
deren Inhalt vertikal zentrieren kann?Im Mozilla ja, im IE nein.
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/-
Gibt es denn einen weg, das elegant zu lösen?
-
Hallo.
Gibt es denn einen weg, das elegant zu lösen?
"Fragst du noch oder liest du schon?" -- http://www.tiptom.ch/homepage/faq.html?q=tabzentriert wurde dir doch bereits genannt.
MfG, at
-
-
-
-
-
also ich meine, daß hätte ich alles so gemacht... ich schreib mal den Quelltext:
style definition:
.text { width:100%; height:100%; vertical-align:middle; }und html:
<div class="text" style="background:red;">
<h2>Entspannung und Wohlbefinden
<br>für Körper und Geist
<br> durch japanische Druckmassage
</h2>
</div>so.. aber der Text steht (im IE, bei anderen weiß ich nicht) nach wie vor oben..., wo er nicht sein soll... er soll mittig sein.. *grummel*
-
-
ein etwas schmutziger trick ist das hier:
<html>
<head>
<style>
.ohmygod {
position:relative;
width:500;
height:100;
text-align:center;
border-width:1;
border-color:black;
border-style:solid;
display:table-cell;
line-height:100%;
}
</style>
</head>
<body>
<span class="ohmygod">
this sucks</body>
</html>der text landet irgendwie. in der mitte des spans. fragt mich nicht wie... :o)
Hallo ihr lieben...
ich habe schon gesehen, daß es mehrere Beiträge zu dem folgenden Thema gibt, habe aber keine befriedigende Antwort gefunden..:
Ich versuche Text in einer div-box vertical mittig auszurichten...
hatte eigentlich gedacht ich schreibe einfach vertical-align:middle mit in das style attribut.. aber das hat nicht geklappt...
hab auch nochmal nachgelesen... daß es im Verhältnis zu irgendetwas anderem klappt... hab ich aber ganz ehrlich nicht so richtig verstanden...
Also vielleicht kann mir jemand helfen:
ist es möglich, text oder grafiken in einer div-box vertical mittig auszurichten???
und wann setzt man vertical-align ein? nur in Tabellen??
-
Hi,
ein etwas schmutziger trick ist das hier:
<html>
Doctype fehlt.
<head>
<style>type-Attribut fehlt.
.ohmygod {
position:relative;überflüssig, wenn keine Positionierungsangaben gemacht werden.
width:500;
ungültiger Wert. 500 Kilometer? 500 Meilen? Einheit angeben.
height:100;
selbiges, Einheit fehlt.
text-align:center;
border-width:1;Zur Abwechslung fehlt mal wieder die Einheit.
border-color:black;
border-style:solid;
display:table-cell;
line-height:100%;das entscheidende vertical-align:middle; fehlt sowieso.
}
</style></head>
title-Element im head fehlt.
<body>
<span class="ohmygod">
this sucks</body>Ende-tag von span ist nicht optional
</html>
der text landet irgendwie. in der mitte des spans. fragt mich nicht wie... :o)
Sollen das 3 Sätze sein?
Im IE nicht - da wird sogar die Box ganz klein, weil der table-cell nicht kennt und daher ignoriert - es bleibt bei inline (mit div statt span bleibt wenigstens die Box so groß wie angegeben).
Im Mozilla und Opera geht es auch nur dann, wenn man die diversen Fehler korrigiert (da sonst die Box nur so hoch wie nötig ist und kein Platz zum vert. Zentrieren ist)...Und btw, das sinnvolle Zitieren solltest Du auch noch üben...
cu,
Andreas--
MudGuard? Siehe http://www.Mud-Guard.de/
-