Skip to content

Text Effects (Centering (Text, Images ) in HTML

Centering text and images in HTML can be achieved using both HTML tags and CSS properties. Here’s how you can center different types of content:

Centering Text

Using the <center> Tag

The <center> tag was used in HTML4 to center text, but it is deprecated in HTML5 and should not be used in modern web development. Instead, CSS should be used for centering content.

<!– Deprecated way –>

<center>This text is centered.</center>

Using CSS

The recommended way to center text is by using CSS. There are several methods to do this depending on the context.

  1. Text Align Center Use text-align: center; within a block-level container (like <div>, <p>, etc.).

<div style=”text-align: center;”> This text is centered. </div>

  1. Flexbox Use Flexbox for more advanced centering within a container.

<div style=”display: flex; justify-content: center;”> This text is centered. </div>

Centering Images

Using CSS

Images can be centered within their parent container using CSS. Here are some methods:

  1. Text Align Center This works if the image is an inline or inline-block element, and it’s within a block-level container with text-align: center;.

<div style=”text-align: center;”>

<img src=”image.jpg” alt=”Centered Image”> </div>

  1. Margin Auto This method centers the image by setting the left and right margins to auto, and the image should be displayed as a block element.

<div style=”text-align: center;”>

<img src=”image.jpg” alt=”Centered Image” style=”display: block; margin: 0 auto;”> </div>

  1. Flexbox Flexbox can be used to center images as well. This is particularly useful for vertically and horizontally centering images.

<div style=”display: flex; justify-content: center; align-items: center; height: 100vh;”> <img src=”image.jpg” alt=”Centered Image”>

 </div>

Centering Block Elements (Divs, Containers)

  1. Margin Auto Use margin: 0 auto; to center block elements like <div> horizontally within their parent container.

<div style=”width: 50%; margin: 0 auto; background-color: lightgrey;”>

 This div is centered horizontally.

</div>

  1. Flexbox Use Flexbox to center block elements both horizontally and vertically.

<div style=”display: flex; justify-content: center; align-items: center; height: 100vh;”> <div style=”background-color: lightgrey; padding: 20px;”>

This div is centered both horizontally and vertically.

</div>

</div>

  1. Grid Layout Use CSS Grid for complex layouts that require centering.

<div style=”display: grid; place-items: center; height: 100vh;”>

 <div style=”background-color: lightgrey; padding: 20px;”>

 This div is centered both horizontally and vertically. </div> </div>

Summary

  • Text Centering: Use text-align: center; in a block-level container.
  • Image Centering: Use text-align: center; in a container, margin: 0 auto; for block images, or Flexbox.
  • Block Elements Centering: Use margin: 0 auto;, Flexbox, or CSS Grid.

By using these CSS techniques, you can ensure that your content is centered in a modern, responsive, and accessible way.