How to Center Text in HTML-How HTML

How to Center Text in HTML

In HTML, there are several ways to center text within an element. In this article, we will explore different techniques to achieve text centering using CSS.

1. Centering Text Horizontally

Using text-align property

The text-align property in CSS can be used to center text horizontally within a block-level element. Here’s an example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .center {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="center">Centered text using text-align property</div>
</body>
</html>

Output:

How to Center Text in HTML

Using margin property

You can also center text horizontally by using the margin property with auto values. Here’s an example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .center {
            margin: 0 auto;
            width: 50%;
        }
    </style>
</head>
<body>
    <div class="center">Centered text using margin property</div>
</body>
</html>

Output:

How to Center Text in HTML

2. Centering Text Vertically

Using line-height property

The line-height property in CSS can be used to center text vertically within a block-level element. Here’s an example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .center {
            line-height: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="center">Centered text using line-height property</div>
</body>
</html>

Output:

How to Center Text in HTML

Using flexbox

Flexbox is a powerful layout tool in CSS that can be used to center text vertically. Here’s an example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>Centered text using flexbox</div>
    </div>
</body>
</html>

Output:

How to Center Text in HTML

3. Centering Text Both Horizontally and Vertically

Using absolute positioning

You can center text both horizontally and vertically within a container using absolute positioning. Here’s an example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            position: relative;
            height: 200px;
        }
        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">Centered text using absolute positioning</div>
    </div>
</body>
</html>

Output:

How to Center Text in HTML

Using table-cell and vertical-align

Another way to center text both horizontally and vertically is by using the display: table-cell and vertical-align:middle properties. Here’s an example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: table;
            width: 100%;
            height: 200px;
        }
        .center {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">Centered text using table-cell and vertical-align</div>
    </div>
</body>
</html>

Output:

How to Center Text in HTML

Summary

In this article, we have explored various techniques to center text in HTML using CSS. Whether you need to center text horizontally, vertically, or both, there are multiple methods to achieve the desired result. Experiment with these techniques in your own projects to create visually appealing and well-aligned text elements on your website.

How to Center Text in HTML