Maison > Article > interface Web > Comment centrer le contenu du texte à l'aide de JavaScript ?

Comment centrer le contenu du texte à l'aide de JavaScript ?

WBOYavant: 2023-08-24 11:09:064347parcourir

如何使用 JavaScript 将文本内容居中对齐？

Nous pouvons utiliser JavaScript pour aligner le contenu du texte au centre en manipulant les propriétés CSS de l'élément. Cela peut être fait en sélectionnant l'élément et en définissant la propriété "text-align" sur "center". De plus, nous pouvons également utiliser l'attribut "margin" pour ajuster la position de l'élément.

Méthode

Il existe de nombreuses façons de centrer le contenu du texte à l'aide de JavaScript -

La méthode la plus courante consiste à définir la propriété text-align sur "center" dans la feuille de style CSS.
Une autre façon consiste à utiliser la balise
. Enfin, vous pouvez utiliser la propriété margin pour centrer le contenu du texte.

Exemple

Ci-dessous, nous verrons le code pour centrer le texte en utilisant uniquement JavaScript.

<html>
<head>
   <title>JavaScript - Center Text</title>
</head>
   <body>
      <script> 
         const centerText = () => {    
            var centerText = document.createElement('p');
            centerText.innerText = 'Center Text';
            centerText.style.color = 'black';
            centerText.style.textAlign = 'center';
            document.body.appendChild(centerText);
         } 	 
         centerText();
      </script>
   </body>
</html>

Exemple

Voyons un autre exemple de contenu de texte aligné au centre -

<!DOCTYPE html>
<html>
<head>
   <title>
      Align Text
   </title>
</head>  
   <body>
      <h1>Demo Heading</h1> 
      <p id="demo">
         This text will be center aligned
      </p> 
      <button onclick="demoFunc();">Align</button> 
      <script>
         function demoFunc() {
            let txt = document.getElementById("demo");
            txt.style.textAlign = "center";
         }
      </script>
   </body>
</html>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：FabricJS - Implémenter par programme la copie d'objets sur des polygones ?Article suivant：FabricJS - Implémenter par programme la copie d'objets sur des polygones ?

Articles Liés

Voir plus