Home >Web Front-end >CSS Tutorial >How to center text in css

How to center text in css

青灯夜游
青灯夜游Original
2021-11-09 11:57:5324143browse

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;".

How to center text in css

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.

How to center text in 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.

How to center text in css

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.

How to center text in css

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

How to center text in css

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.

How to center text in css

#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.

How to center text in css

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

How to center text in css

(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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn