Comment centrer le contenu du texte à l'aide de JavaScript ?-js tutoriel-php.cn

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

WBOY

Libérer： 2023-08-24 11:09:06

avant

4308 Les gens l'ont consulté

如何使用 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>

Copier après la connexion

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>

Copier après la connexion

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!