web-dev-qa-db-fra.com

Remplacement CSS pour <div align = "center">

Je sais que cette question a été posée à plusieurs reprises, mais je n'ai jamais vu de réponse satisfaisante. Je veux dire, une réponse qui fonctionne réellement.

Donc, nous y revoilà. Prenez ce jsFiddle: http://jsfiddle.net/KFMyn/3/

Si vous supprimez le align="center" du code HTML, quelle CSS devez-vous utiliser pour que le résultat soit identique à l'original?

Les réponses que j'ai trouvées correspondent généralement à margin:0 auto et/ou text-align:center, mais aucune de celles-ci n'a pour effet de rendre le résultat identique à l'original.

htmlcssdeprecated
20
Mr Lister

Le texte aligné au centre couvre la plupart des éléments de texte, mais un petit supplément est nécessaire pour centrer le tableau

div {width:400px; text-align:center;}
table {margin: 0 auto;}
table td {text-align: left;}

http://jsfiddle.net/NYuv8/4/

18
Paul Sheldrake
div {width:400px; text-align: center;}
table {display:inline-block;}​

Cela devrait également fonctionner en plus de la réponse de Paul.

http://jsfiddle.net/KFMyn/13/

2
Andre Loker
div {width:400px; margin: 0 auto; text-align: center; }
div > * { margin: 0 auto; }

Travaille pour moi. Mais cela peut ne pas fonctionner correctement si vous avez plusieurs éléments dom imbriqués 

1
pduersteler
    margin: 0 auto; 
    text-align: center;

Le code ci-dessus risque de ne pas fonctionner lorsque vous utilisez des grilles bootstrap . Voici la solution rapide pour ce faire, à savoir bootstrap 4 et IL FONCTIONNE DANS TOUS LES NAVIGATEURS 

<div class="row">
  <div class="col-sm-2">
     <div class="customClass mx-auto">
         <p class="text-center"> your text goes here </p>
     </div>
  </div>
</div

vous pouvez mettre n'importe quelle colonne comme col-sm-2, 3, 4 ....... 12

Remplacement de l'étiquette centrale dans différentes situations

1. text-center Fonctionne avec les balises p, a, bouton, h et plus i.e toutes les balises contenant des données ou du texte directement

2. Flex Il peut être utilisé pour aligner un élément complet à l’intérieur d’un autre élément, mais il contient davantage d’utilitaires. Consultez la documentation pour référence. 

Utiliser peut centrer les éléments en utilisant flex de la manière suivante

display:flex;
justify-content-center:
align-items:center;

Une autre propriété d'importation est flex-direction i.e

flex-direction:column
flex-direction:row

Utilisez la direction de flex selon le type d'alignement que vous voulez

0
Nishant Singh

Vous pouvez aussi essayer de styliser la table, comme ceci:

div {
    width:400px; 
    margin: 0 auto; 
    text-align: center;
}
div table {
  margin: 0 auto;
}
0
walmik