Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to align text content into center using JavaScript?
We can align text content into the center using JavaScript by manipulating the CSS properties of HTML elements. This is done by selecting the target element and setting the "text-align" CSS property to "center" using JavaScript's style object.
Methods to Center Text
There are multiple approaches to center text content using JavaScript:
Setting the textAlign property to "center" via JavaScript's style object
Using margin properties with auto values for horizontal centering
Dynamically creating centered elements with predefined styles
Method 1: Using textAlign Property
The most straightforward approach is to access an existing element and modify its textAlign style property:
<!DOCTYPE html>
<html>
<head>
<title>Center Text with JavaScript</title>
</head>
<body>
<h1 id="heading">Demo Heading</h1>
<p id="demo">This text will be center aligned</p>
<button onclick="centerText()">Center Text</button>
<script>
function centerText() {
let heading = document.getElementById("heading");
let paragraph = document.getElementById("demo");
heading.style.textAlign = "center";
paragraph.style.textAlign = "center";
console.log("Text aligned to center");
}
</script>
</body>
</html>
Method 2: Creating Centered Elements Dynamically
You can also create new elements with center alignment applied immediately:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Center Text</title>
</head>
<body>
<div id="container"></div>
<button onclick="addCenteredText()">Add Centered Text</button>
<script>
function addCenteredText() {
const container = document.getElementById('container');
// Create new paragraph element
const newParagraph = document.createElement('p');
newParagraph.innerText = 'This is dynamically created centered text';
newParagraph.style.textAlign = 'center';
newParagraph.style.color = 'blue';
newParagraph.style.fontSize = '18px';
container.appendChild(newParagraph);
console.log("Centered text added");
}
</script>
</body>
</html>
Method 3: Using Margin for Block-Level Centering
For block-level elements, you can use margin auto to center the entire element:
<!DOCTYPE html>
<html>
<head>
<title>Center Block Elements</title>
</head>
<body>
<div id="box" style="width: 300px; background-color: lightblue; padding: 20px;">
This box will be centered on the page
</div>
<button onclick="centerBox()">Center Box</button>
<script>
function centerBox() {
const box = document.getElementById('box');
box.style.margin = '20px auto';
box.style.textAlign = 'center';
console.log("Box centered with margin auto");
}
</script>
</body>
</html>
Comparison of Methods
| Method | Use Case | Effect |
|---|---|---|
textAlign = "center" |
Text content within elements | Centers text horizontally within its container |
margin = "auto" |
Block-level elements | Centers the entire element on the page |
| Dynamic creation | New content | Creates pre-styled centered elements |
Conclusion
JavaScript provides flexible ways to center text content by manipulating CSS properties. The textAlign property is most common for centering text, while margin: auto centers entire elements. Choose the method based on whether you need to center existing content or create new centered elements.
15K+ Views
