How to change the text alignment using jQuery ?

Last Updated : 12 May, 2023

In this article, we will see how to change the text alignment of an element using jQuery. To change the text alignment of an element, we will use css() method.

The css() method is used to change the style property of the selected element.

Syntax:

$(selector).css(property)

In the below example, first, we create an <h3> element containing an id attribute and also create a button element. When the user clicks on the button, the css() method is called and this method sets the text-align property value to the center.

Example: In this example, we will change the text alignment using jQuery.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!-- Including jQuery -->
    <script src=" 
https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
    </script> 
</head> 
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> 
        How to change the text 
        alignment using jQuery ? 
    </h3> 
  
    <h3 id="content"> 
        Welcome to GeeksforGeeks 
    </h3> 
    <br> 
  
    <button>Change font size</button> 
  
    <script> 
        $(document).ready(function() { 
            $('button').click(function() { 
                $("#content").css("textAlign", "center"); 
            }); 
        }); 
    </script> 
</body> 
</html>