Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

Master Balance and Beautiful Design with CSS Center Text

Alignment with CSS helps to achieve polished and user-friendly interfaces. It offers a sense of balance, readability and aesthetic appeal, contributing to a positive user experience on the web. With CSS center text, visual balance is created, hence eliminating the uneven distribution of elements on a page. Alignment also offers flexibility and adaptability, elements can be horizontally and vertically centered, accommodating various content and design requirements.

Be it text, images or entire sections of a webpage, alignment is a fundamental concept that enhances both form and function.

PS: Engineers waste time building and styling components when working on a project, writing repetitive markup adds time to the project and is a mundane, boring task for engineers. PureCode.ai uses AI to generate a large selection of custom, styled UI components for different projects and component types.

Generally, the text-align property has some values attached to it.

  1. left: This aligns the text to the left edge of the container

    CSS

    selector {
        text-align: left
    }
  2. right: This aligns the text to the right edge of the container

    CSS

    selector {
        text-align: right
    }
  3. center: This centers the text within the container

    CSS

    selector {
        text-align: center
    }
  4. justify: Stretches the lines of text to fill the width of the container, excluding the last line

    CSS

    selector {
        text-align: justify
    }
  5. initial: This sets the property to its default state

    CSS

    selector {
        text-align: initial
    }
  6. inherit: Inherits the property from its parent element

CSS

selector {
    text-align: inherit
}

How to Center Text in CSS using the Text Align Property

There are several ways to center texts inside and outside elements. Let us begin with a simple example.

In this example, we have a text-only web page and will use the `text-align` property to center all the text. We can use the type body selector or the CSS universal selector (*) to target every element on the page. In this example, we will use the body selector.

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div>
      <h2>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam
        accusantium facilis neque animi tenetur vitae.
      </h2>
      <p>dolor sit amet consectetur adipisicing elit. Quibusdam</p>
    </div>
  </body>
</html>

CSS

body {
  text-align: center;
  font-size: 14px;
}

In the image below, we can see that all texts have been center-aligned

Centering an HTML Element Type with the Text Align Property

There are cases where we do not want all the texts on a page to be centered, there are also scenarios where images and other elements besides texts may be present on the page. We could make use of CSS selectors to target the individual texts we want to center.

In this example, we will target all H2 headings, every other element will remain left-aligned(by default). We will then give the `text-align` property a value of center.

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div>
      <h2>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam
        accusantium facilis neque animi tenetur vitae.
      </h2>
      <p>dolor sit amet consectetur adipisicing elit. Quibusdam</p>
      <p>sit amet consectetur adipisicing elit. Quibusdam</p>
    </div>
  </body>
</html>

CSS

h2 {
  text-align: center;
}

Notice that in the image below, only the H2 elements are center-aligned, the P elements remained left-aligned by default.

Centering Individual Elements with a CSS ID

Using the CSS ID Selector method, you can also center an individual element on a page.

  • A CSS ID will be assigned to the element we wish to center. In this example, we will center only the paragraph elements (P tags).

  • In this example, we will use the ID “center”, i.e. `<p id= “center”>`

  • Type the ID selector `#center` in your CSS file and set the `text-align` property to center.

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div>
      <p id="center">only the paragraph elements are centered</p>
      <h2>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam
        accusantium facilis neque animi tenetur vitae.
      </h2>
      <p id="center">only the paragraph elements are centered</p>
    </div>
  </body>
</html>

CSS

#center {
  text-align: center;
}

Here, we can see in the image below, that we have assigned the ID “center” to the paragraph elements, making them the only elements that are centered.

How to Center Button Elements

There are several ways to center button elements. Here are some methods.

  • Centering button elements with text align property

  • Centering button element with flexbox

Now, let’s a take a look at them individually.

Centering Button Elements with Text Align Property

  • Open your HTML file.

  • Wrap the button element around a div.

  • We will assign the class “centered-button” to the div tag.

  • Inside the button element, we will assign the class “button-style” to give some styling to our button.

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div>
      <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
      <p>accusantium facilis neque animi tenetur vita</p>
      <div class="centered-button">
        <button class="button-style">click me</button>
      </div>
    </div>
  </body>
</html>

CSS

.centered-button {
  text-align: center;
}
.button-style {
  padding: 10px;
  background-color: darkblue;
  color: white;,
}

Result:

Centering button element with flexbox

Flexbox is a powerful layout model that simplifies centering. With Flexbox, we can horizontally and vertically center texts. We will further discuss the flexbox concept later in the article.

In this example, we will take the following steps.

  • Wrap the button element around a div.

  • We will assign the class “centered-button” to the div tag.

  • Inside the button element, we will assign the class “button-style” to give some styling to our button.

  • In our CSS file, inside the class “.centered-button”, we will initiate the flexbox concept “display: flex”.

  • Apply the property “justify-content: center” to horizontally center our element.

  • Lastly, apply the property “align-items: center” to achieve a vertically centered element

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div>
      <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
      <p>accusantium facilis neque animi tenetur vita</p>
      <div class="centered-button">
        <button class="button-style">click me</button>
      </div>
    </div>
  </body>
</html>

CSS

.centered-button {
  display: flex;
  justify-content: center;
  align-items: center;
}
.button-style {
  padding: 10px;
  background-color: darkblue;
  color: white;,
}

Centering button element with Grid

This method achieves both vertical and horizontal alignment

  • Wrap the button element around a div.

  • We will assign the class “centered-button” to the div tag.

  • Inside the button element, we will assign the class “button-style” to give some styling to our button.

  • We will initiate the grid concept inside the “.centered-button” CSS class with “display: grid”.

  • To achieve alignment, we will apply the property “place-items: center”

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div>
      <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
      <p>accusantium facilis neque animi tenetur vita</p>
      <div class="centered-button">
        <button class="button-style">click me</button>
      </div>
    </div>
  </body>
</html>

CSS

.centered-button {
 display: grid;
 place-items: center;
}
.button-style {
  padding: 10px;
  background-color: darkblue;
  color: white;,
}

How to Center Block Elements Using the Margin Property

While the center align property would work for centering texts inside a div, it will not work if you are centering the entire div/block. The margin property then comes into play here.

  • Open your HTML file.

  • Wrap the block element around a div.

  • We will assign the class “centered-div” to the div tag.

  • In the CSS file, we will apply our styling.

  • Give a specified `width` to the div and also give `margin: auto`

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
    <div class="centered-div">Lorem ipsum dolor es</div>
    <p>accusantium facilis neque animi tenetur vita</p>
  </body>
</html>

CSS

.centered-div {
  width: 50%;
  margin: auto;
  /* other styling */
  border-radius: 20px;
  border-color: #000;
  border-style: solid;
  background-color: #EAF0F6;
  padding: 20px;
}

In the image below, we can see that the block element i.e. the div, has been centered using the margin property.

Centering Text Inside a Div using Text Align Property

In our previous example, you can recall that we centered the div element but not the text inside the div. In this example, the `text-align` property comes into play.

  • Open your HTML file.

  • Wrap the block element around a div.

  • We will assign the class “centered-div” to the div tag.

  • In the CSS file, we will apply our styling.

  • Give a specified `width` to the div, give `margin: auto`, and lastly, we will add the `text-align: center` property.

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
    <div class="centered-div">Lorem ipsum dolor es</div>
    <p>accusantium facilis neque animi tenetur vita</p>
  </body>
</html>

CSS

.centered-div {
  width: 50%;
  margin: auto;
  /* to center the text within the div */
  text-align: center;
  /* other styling */
  border-radius: 20px;
  border-color: #000;
  border-style: solid;
  background-color: #EAF0F6;
  padding: 20px;
}

As opposed to the previous example, we can see here that the text inside the div has been centered.

How to use Flexbox to Center Text

Flexbox (Flexible Box Layout) is a CSS layout model that provides a more efficient way to align items within a container. The flex concept is very useful for building responsive and complex layouts with a simplified and more intuitive approach than traditional models. Flexbox is one of the most efficient methods for vertically and horizontally centering text.

  • First, we would have to define a flex container(div).

  • Set the display property of the flex container to flex.

  • Lastly, give the properties `justify-content: center` and `align-items: center` to the container. This will ensure that the texts are horizontally and vertically aligned.

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="flex-box">Lorem ipsum doetur iure</div>
  </body>
</html>

CSS

.flex-box {
  display: flex;
  justify-content: center;
  align-items: center;
  /* other styling */
  height: 250px;
  color: white;
  background: #541c0e;
}

The resulting image below shows that the text inside the div has been vertically and horizontally centered.

Centering Text Inside a Button Using Inline CSS.

Instead of centering headings and paragraphs, let us center text inside another element.

  • Open your HTML file.

  • Wrap the button in a div.

  • Then, add an inline style declaration to the opening tag of the div, i.e.

    `div style = “[insert style rules]”`.

  • In your CSS file, you can style the button appearance.

We can see below that the div wrapped around the button was given an inline styling of `text-align: center`.

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h2>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eius, omnis!
    </h2>
    <div style="text-align:center">
      <button type="button" class="btn">Click Me</button>
    </div>
  </body>
</html>

CSS:

.btn{
  padding: 20px; 
  background-color: #05b122; 
  color: white;
  border-radius: 10px;
  width: 200px;
}

Here, the button was given some additional styling. In the image below, we can see the result.

Inline, internal, or external CSS, best practice?

Inline CSS

Now, inline styles are usually applied directly within the HTML tags using the `style` attribute.

HTML, XML

<p style = "color": blue>This is a blue paragraph text</p>

Pros:

  • Inline styling is specific to individual elements.

  • Offers quick application.

Cons:

  • Because styling becomes mixed with content, there is reduced maintainability.

Internal CSS

Internal styles are written within the HTML document. This is typically done in the `<head>` section using the `<style>` tag.

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <p>This is a red paragraph text</p>
  </body>
</html>

Observe that the styling is included between the `<style>` tags in the `<head>` section of the HTML document.

Pros:

  • Internal CSS offers centralized styling.

  • Code is maintained better than Inline styling.

Cons:

  • Internal CSS is still somewhat mixed with HTML.

  • Styling tied to a specific document.

External CSS

In external styling, we store all our styles in separate CSS files which are linked to the HTML documents.

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <p>This is a green paragraph text</p>
  </body>
</html>

Notice that no styling has been applied to the HTML document.

CSS

Here, we apply the styling for the `<p>` tag.

p {
  color: green;
}

Pros:

  • External CSS promotes the clean separation of style and content.

  • Offers code maintainability and reusability across multiple pages.

Cons:

  • Due to additional HTTP request, initial load time may be slower.

Although external styling is generally acceptable due to its suitability on larger codebases, best practice still depends on the project’s scope and requirements. Inline and internal CSS may be suitable for small projects or quick styling.

Vertical Alignment with the Padding Property

One way to achieve vertically centered text in a div is through padding property.

Using the shorthand padding property, we will give the div some padding to ensure a vertically centered text

  • Open your HTML file.

  • Wrap the text in a div.

  • Apply the class name to the div and style in the CSS file.

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="center-vertically">
      <p>This is a paragraph text</p>
    </div>
  </body>
</html>

CSS

.center-vertically{
  background: #541c0e;
  padding: 50px 0 50px;
  color: white
}

In the image below, we can see that the text has been vertically centered.

Vertically Center Text Using the CSS Line-Height Property

We can also use the line-height CSS property to achieve vertically centered texts with an element/div. We can achieve this by setting the property with a value that is equal to the container element’s height.

  • Open your HTML file.

  • Wrap the text in a div.

  • Apply the class name to the div and style in the CSS file.

  • In the CSS file, give the div a height e.g. 200px.

  • Assign a line height that is equal to the height given.

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="center-vertically">
      <p>This is a paragraph text</p>
    </div>
  </body>
</html>

CSS

.center-vertically{
  background: #541c0e;
  height: 200px;
  line-height: 200px;
}

Here we have centered out text vertically using the line height property.

Vertically Center Text Using the CSS Position and Transform Property

To vertically align text using the position and transform properties, we will engage in the following steps.

  • Open your HTML file.

  • Wrap the text in a div.

  • Apply a class name to the div. Another class name will be assigned to the text you want to center.

  • In the CSS file, set the parent container to `position: relative`.

  • Next, we will style the text within the div and give it `position: absolute`.

  • Still styling the text, give `top: 50%` and `translateY(-50%)` transform property. Doing this will give a vertically centered text.

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="center-vertically">
      <p class="text">This is a paragraph text</p>
    </div>
  </body>
</html>

CSS

.center-vertically {
  background: #541c0e;
  height: 200px;
  color: white;
  position: relative;
}

.text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
}

We can see in the image below, that we have been able to center text vertically

Centering Vertically and Horizontally in CSS

Although we have addressed this in previous examples using various methods, we will be using the CSS position and transform properties here to achieve both vertical and horizontal centering.

  • Open your HTML file.

  • Wrap the text in a div.

  • Apply a class name to the div. Another class name will be assigned to the text you want to center.

  • In the CSS file, set the parent container to `position: relative`.

  • Next, we will style the text within the div and give it `position: absolute`. This will make the text an absolutely positioned element.

  • Still styling the text, give `top: 50%`, `left: 50%`, `translateY(-50%)` and `translateX(-50%)` transform property.

HTML, XML

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="center-vertically">
      <p class="text">This is a paragraph text</p>
    </div>
  </body>
</html>

CSS

Here, we will center text horizontally and vertically.

.center-vertically {
  background: #541c0e;
  height: 200px;
  color: white;
  position: relative;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  transform: translateX(-50%);
  margin: 0;
}

The image below shows that the text has been horizontally and vertically aligned.

Why is my Text-Align Center not Working in CSS?

If you are having trouble with the `text-align: center` property not working as expected, it could be due to certain reasons.

  • Wrong Selector: Be sure to apply the `text-align: center` value to the correct CSS selector. For example, if you are trying to center a text within a `div`, ensure that you are targeting that specific div in your CSS.

  • Override by Specificity: Because more specific rules take precedence, you need to check if there are more specific rules overriding your `text-align` property. You may need to adjust the specificity of your selector or modify it according to conflicting styles.

  • Inheritance: You must check if a parent element’s styling is not overriding the text alignment. CSS styles can be inherited from parent elements, therefore affecting the appearance of child elements.

Overriding Initial Alignment in CSS

There are cases where you want to override your initial CSS. For example, you want a text to be center-aligned in the desktop view but left-aligned in the mobile view. Media queries are a very good way to achieve this.

In conclusion, mastering text alignment in CSS is essential for creating visually appealing and user-friendly interfaces. Proper alignment contributes to a sense of balance, readability, and aesthetic appeal, ultimately enhancing overall user experience.

PureCode.ai can cater for your code development process. It will save you valuable time and effort on a project by providing customized, and ready-to-use components which will allow you to prioritize more important and thought-intensive tasks to speed up the development of your user interface.

Shadrach Abba

Shadrach Abba