How to center text in css

In CSS, you can use the text-align attribute to center the text. The function of this attribute is to specify the horizontal alignment of the element's text. You only need to set the value of this attribute to "center". Align text to the center; syntax "text-align:center;".

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In CSS, text centering is mainly achieved by setting the text-align attribute to center. Let’s take a look at the code example below.

1. Create a new html file, named test.html, to explain how to center text using CSS.

2. In the test.html file, use the div tag to create a module and set its class attribute to bob. Next, we will set its css style through this class.

3. In the test.html file, within the div tag, use the p tag to create a line of text. Next, we will use CSS to center the text.

##4. In the test.html file, write the tag, and the css style of the page will be written within this tag.

5. In the css tag, set the style of the div with the class name bob, defining its width as 300px, height as 30px, and background color as red.

#6. In the css tag, set the style of the p element, use the text-align attribute to set the text to center (center), and the text color is white.

#7. Open the test.html file in the browser to check the effect.

(Learning video sharing:

css video tutorial)

The above is the detailed content of How to center text in css. For more information, please follow other related articles on the PHP Chinese website!