JavaScript Code

jQuery – Center align text in element(s)

Center align text in HTML Element(s) using jQuery

Selected some HTML elements in the document, centre align the text in the elements using jQuery.

Solution

To centre align text in selected HTML elements using jQuery, call css() function on the selected elements and pass the arguments: "text-align" CSS property, and "center" value for the CSS property.

For example, the syntax to centre align all paragraphs in the document is

$("p").css("text-align", "center");

Programs

1. Center align text in paragraphs in the document.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script>
      function myAction() {
        $("p").css("text-align", "center");
      }
    </script>
  </head>
  <body>
    <button onclick="myAction()">Center align text in paragraphs</button>
    <p style="background:yellow;">This is paragraph.</p>
  </body>
</html>

Related Programs

copyright @2022