vertiakle/horizontale Zentrierung im <div>

22.10.2004, 15:16

Hi Leute!
Eine Frage:

Also ich habe einen <div> Container und will darin ein bild zentrieren
also mit der horizontalen zentrierung ist das kein Problem align="center" bzw. style="text-align:center" aber wie ist das mit der vertikalen entrierung! Was vieleicht noch ganz wichtig wäre zu erwähnen ist, dass
es sich dabei um ein variables Bild handelt, d.h. ich kann jetzt nich sagen:
"Hey ich mach konstant: margin-top: 15px" oder so!

Vielen dank für euer bemühen!

imported_Ben · 22.10.2004, 15:22

http://css4you.de/vertical-align

sollte doch eigentlich klappen, oder?

ansonsten kannst du auch versuchen mit 'margin: xy' den abstand auf jeder seite festzulegen ... wie sich das dann verhält, wenn das bild den platz einnehmen will .... ausprobieren.

grüße ben.

22.10.2004, 15:49

so ich hab mir da mal schnell was zusammengetippt,
klappt allerdings net:

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
	<head>
		<title>Test Vertikales Zentrieren im div</title>
	</head>
		<body>
			<div style="width:200px;height:200px;text-align:center;vertical-align:middle;border:solid 1px #000000;">
				[img]../imgs/icons/xhtml.gif[/img]
			</div>
		</body>
</html>

( http://woltersware.dyndns.org/root_d...cal_align.html )

Warum net?

imported_Ben · 22.10.2004, 16:28

kann ich dir sagen.
weil ich mir den link mal richtig durchgelesen habe .. und was steht da?

Zitat:

Anwendbar auf: Inline-Elemente, Elemente, die mit display:table-cell formatiert sind und <td>-Tags

gut. schauen wir mal, was inline-elemente sind:

http://css4you.de/elemente.html#inline

Zitat:

a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, input, kbd, label, map, object, q, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, var

basefont, font, s, u,

kein div

also müssen wir mit display:table-cell

http://css4you.de/display.html
arbeiten.

so dass dann im endeffekt das hier rauskommt.

Code:

<?xml version="1.0" encoding="iso-8859-1"?>
       <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
   <head>
      <title>Test Vertikales Zentrieren im div</title>

         <style type="text/css"><!--

          #css {
          	margin:auto;
                 width:200px;
                 height:200px;
                 border:solid 1px #000000;
                 vertical-align:middle;
                 display:table-cell;
                 text-align:center;
          }


	//--></style>

   </head>
      <body>

         <div id="css">
            
         </div>

      </body>
</html>

und wieder was gelernt

22.10.2004, 17:36

Vielen Dank Ben!

Aber warum funzt der Kack nicht im IE??
Die Elemente hab ich alle nachgeschlagen und die sind alle ab Version 5.5 im rennen?!

EDIT:
Sry Fehler..
Ich hab in bei selfhtml unter display geguckt und da stand zwar ab 3.0
das galt aber net für table-cell...
Wäre trotzdem gut wenn einer ne Lösung für alle Browser fände

imported_Ben · 22.10.2004, 17:43

http://css4you.de/display.html

weil der IE display:table-cell nicht unterstützt.

allerdings verstehe ich jetzt auch nicht, warum sich nichts ändert, wenn ich display:inline; verwende.

dann wird das element als inline-element dargestellt und es sollte eigentlich funktionieren ...

schau mal hier rein:

http://www.webwork-community.net/posting4786_24_0.html

geht anscheinend nicht.
oder eben nur mittels einer tabelle. manchmal darf die übrigens auch verwenden. das nur mal so am rande

22.10.2004, 18:17

Zitat:

dann wird das element als inline-element dargestellt und es sollte eigentlich funktionieren ...

Öhm ne dann nimmt er die höhe und breite im forefox nimmer an!

Zitat:

schau mal hier rein:
http://www.webwork-community.net/posting4786_24_0.html

geht anscheinend nicht.

Hehe das hab ich schon vor dem Threaderstellen gelesen und wollte genau deshalb etwas nachhaken! Ich kann auch Google benutzen *megastolz*

Zitat:

oder eben nur mittels einer tabelle. manchmal darf die übrigens auch verwenden. das nur mal so am rande

Oh nein Oh nein... *flenn*

Nein Tabellen soll man wirklich nur dann verwenden wenn man Content tabellarisch darstellen will!
Aber dat is wirklich nen manko das die daran beim w3c net gedacht habn!

Ich werde es jetzt so machen das ich mit pHP das bild irgendwie abtasten werde und dann über Mathematik ausrechnen werde wieviel Pixel dat dingen im margin braucht!GRR

22.10.2004, 18:19

Nein Tabellen soll man wirklich nur dann verwenden wenn man Content tabellarisch darstellen will!

Will ja den Thread nicht aufblasen - aber wer sagt das?
Und vor allem (und viel wichtiger): Ist damit zu rechnen, daß <table> irgendwann auch als deprecated gilt? *ernste Frage*

22.10.2004, 18:26

Zitat:

aber wer sagt das?

Das sagt Herr Martin Seiler in seinem Votrag über Barrierefreies Internet sowie viele andere EXPERTEN aus dem Bereich Internetentwicklung .

http://www.strohhalm.org/.someon?act...=205428&pid=13

Ausserdem steht das in der Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz (Barrierefreie Informationstechnik-Verordnung – BITV):
http://www.rechtsanwalt.de/BITV.html

imported_Ben · 22.10.2004, 18:53

Zitat:

Zitat von Du-weisst-schon-wer

Zitat:

dann wird das element als inline-element dargestellt und es sollte eigentlich funktionieren ...

Öhm ne dann nimmt er die höhe und breite im forefox nimmer an!

ich weiß .. ich sagte ja auch sollte

Zitat:

Zitat von Du-weisst-schon-wer

Nein Tabellen soll man wirklich nur dann verwenden wenn man Content tabellarisch darstellen will!

ich weiß. aber du hast nie gesagt, was du wie darstellen willst.[/quote]

grüße ben.

@cat...
du hast noch etwas nachholbedarf in sachen valides HTML ... ^^
da merkt man, dass du doch noch nicht allzu viele beiträge von mir gelesen hast

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
<div> Container über <select> Boxen legen	Zergling-new	HTML, Usability und Barrierefreiheit	14	19.01.2008 01:12
[CSS]vertical-align bei <div> anwenden	Matze	HTML, Usability und Barrierefreiheit	2	21.01.2007 18:39
Javascript, Anzeige eines <div> ändern	heohni	HTML, Usability und Barrierefreiheit	2	06.06.2006 14:11
vertikale Zentrierung eines <img> im <div>	Zergling-new	HTML, Usability und Barrierefreiheit	11	26.05.2006 20:35
<div> oder <table>		HTML, Usability und Barrierefreiheit	10	17.10.2005 17:32
<div> wächst nicht mit Bild...	stf.stream	HTML, Usability und Barrierefreiheit	4	01.06.2005 16:28
[Erledigt] <div> layout funtzt nicht!!		HTML, Usability und Barrierefreiheit	7	20.04.2005 19:10
Zentrierung IE & Firefox		HTML, Usability und Barrierefreiheit	28	08.03.2005 21:18
[Erledigt] CSS: <DIV> Positionieren		HTML, Usability und Barrierefreiheit	1	18.02.2005 21:05
css: <img> und <div>	flyingeagle	HTML, Usability und Barrierefreiheit	7	18.02.2005 15:35
<div> ohne break	andrew22	HTML, Usability und Barrierefreiheit	7	04.01.2005 12:27
<h1> in <div>	Kofi	HTML, Usability und Barrierefreiheit	2	22.11.2004 09:29
css und <div>	JEGO	PHP Tipps 2004	10	22.10.2004 17:10
zentrierung einer seite im body tag angeben		HTML, Usability und Barrierefreiheit	1	12.10.2004 04:40
[Erledigt] von Frames auf <div>, probleme mit den alten Scripten.		PHP Tipps 2004	6	01.06.2004 17:23

22.10.2004, 15:16
Gast Beiträge: n/a	vertiakle/horizontale Zentrierung im <div> Hi Leute! Eine Frage: Also ich habe einen <div> Container und will darin ein bild zentrieren also mit der horizontalen zentrierung ist das kein Problem align="center" bzw. style="text-align:center" aber wie ist das mit der vertikalen entrierung! Was vieleicht noch ganz wichtig wäre zu erwähnen ist, dass es sich dabei um ein variables Bild handelt, d.h. ich kann jetzt nich sagen: "Hey ich mach konstant: margin-top: 15px" oder so! Vielen dank für euer bemühen!


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

22.10.2004, 15:22
imported_Ben Erfahrener Benutzer Registriert seit: 18.09.2003 Beiträge: 13.598 PHP-Kenntnisse: Fortgeschritten	http://css4you.de/vertical-align sollte doch eigentlich klappen, oder? ansonsten kannst du auch versuchen mit 'margin: xy' den abstand auf jeder seite festzulegen ... wie sich das dann verhält, wenn das bild den platz einnehmen will .... ausprobieren. grüße ben. __________________ Webentwickler-Blog - Buchbesprechung PHP Design Patterns - SQL-Antipatterns

22.10.2004, 17:36
Gast Beiträge: n/a	Vielen Dank Ben! Aber warum funzt der Kack nicht im IE?? Die Elemente hab ich alle nachgeschlagen und die sind alle ab Version 5.5 im rennen?! EDIT: Sry Fehler.. Ich hab in bei selfhtml unter display geguckt und da stand zwar ab 3.0 das galt aber net für table-cell... Wäre trotzdem gut wenn einer ne Lösung für alle Browser fände

22.10.2004, 17:43
imported_Ben Erfahrener Benutzer Registriert seit: 18.09.2003 Beiträge: 13.598 PHP-Kenntnisse: Fortgeschritten	http://css4you.de/display.html weil der IE display:table-cell nicht unterstützt. allerdings verstehe ich jetzt auch nicht, warum sich nichts ändert, wenn ich display:inline; verwende. dann wird das element als inline-element dargestellt und es sollte eigentlich funktionieren ... schau mal hier rein: http://www.webwork-community.net/posting4786_24_0.html geht anscheinend nicht. oder eben nur mittels einer tabelle. manchmal darf die übrigens auch verwenden. das nur mal so am rande __________________ Webentwickler-Blog - Buchbesprechung PHP Design Patterns - SQL-Antipatterns

22.10.2004, 18:19
Gast Beiträge: n/a	Nein Tabellen soll man wirklich nur dann verwenden wenn man Content tabellarisch darstellen will! Will ja den Thread nicht aufblasen - aber wer sagt das? Und vor allem (und viel wichtiger): Ist damit zu rechnen, daß <table> irgendwann auch als deprecated gilt? ernste Frage