Jochen: Container zentrieren

Beitrag lesen

Hi,

text-align ist zielführend. Mein Vorschlag, semantisch korrekte Elemente zu verwenden, ist von deiner Problemstellung vollkommen unabhängig.

text-align funktioniert im vorgestellten Beispiel, meine Aussage war aber, es sollte auch funktionieren für weitere divs, die innerhalb dieses äußeren divs liegen (werden).
Beispiel1 funktioniert nicht

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<title>Test</title>  
<style type="text/css">  
.mittig  
{  
   margin-left: auto;  
   margin-right:auto;  
   width:80%;  
   text-align:center;  
}  
                                     .tc  
                                          {  
                                            display: table-cell;  
                                          }  
</style>  
  
</head>  
  
<body>  
<div class="mittig">  
  <div class="tc">Hallo</div>  
  <div class="tc"><img src="example.gif">  
  <div class="tc">Fans</div>  
</div>  
</body>  
</html>  

Wenn man aber ein div mit align=center (Beispiel2) oder ein <center> einfügt (Beispiel3),
dann ist es wieder richtig.
Beispiel2

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<title>Test</title>  
<style type="text/css">  
.mittig  
{  
   margin-left: auto;  
   margin-right:auto;  
   width:80%;  
}  
.tc  
{  
   display: table-cell;  
}  
</style>  
  
</head>  
  
<body>  
<div class="mittig">  
                                                              <div align=center>  
  <div class="tc">Hallo</div>  
  <div class="tc"><img src="example.gif">  
  <div class="tc">Fans</div>  
                                                              </div>  
</div  
</body>  
</html>  

Beispiel3

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
<title>Test</title>  
<style type="text/css">  
.mittig  
{  
   margin-left: auto;  
   margin-right:auto;  
   width:80%;  
}  
.tc  
{  
   display: table-cell;  
}  
</style>  
  
</head>  
  
<body>  
<div class="mittig">  
                                                                     <center>  
  <div class="tc">Hallo</div>  
  <div class="tc"><img src="example.gif">  
  <div class="tc">Fans</div>  
                                                                     </center>  
</div  
</body>  
</html>  

Der bereits zitierte Text
"I read that the <center> tag is deprecated, however I cannot find any real equivalent to it in CSS."
scheint also zu stimmen.