2011-08-27 11 views
1

J'essaie de me débarrasser de <center tag dans mon HTML, mais apparemment, ce n'est pas si facile dans certains cas.Se débarrasser de <center> tag

Cette réponse: HTML: Replacement for <center> n'a pas non plus fonctionné pour moi.

L'exemple suivant est supposé centrer les deux Foo et Bar, mais il ne se centre pas Bar. Quel est le problème ici?

<!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=UTF-8" /> 
<title>Title</title> 
</head> 

<body> 

<div style=" margin: 0 auto; text-align:center;"> 
Foo 
<table> 
    <tr> 
     <td>Bar</td> 
    </tr> 
</table> 

</div> 

</body> 

</html> 

Si je remplace <div> avec <center> alors tout fonctionne comme indended, mais tag <center> est dépréciée ...

+0

Est-ce que la table ont une largeur fixe? –

Répondre

5

Votre code actuel centre le contenant div mais puisqu'il a width: auto (la valeur par défaut), il se développe pour remplir l'espace horizontal disponible. Cela signifie qu'être centré le place dans la même position que s'il était aligné à gauche (ou à droite). Si vous voulez centrer cet élément, donnez-lui une largeur ... mais ce n'est pas ce que vous voulez faire.

Si vous souhaitez centrer le contenu en ligne (tel que le texte "Foo"), appliquez text-align sur le conteneur.

Si vous souhaitez centrer le contenu d'un bloc (tel que ce tableau), appliquez les marges automatiques que vous utilisez au contenu du bloc (pas le conteneur).

Voir aussi Centring using CSS

+0

merci! c'était le problème! Après avoir appliqué le style à la table, la barre est correctement centrée. – rmflow