How to write css text at the bottom

藏色散人
Release: 2023-01-03 09:26:03
Original
7186 people have browsed it

How to implement css text at the bottom: first create a new html file and use the div tag to create a module; then set the class attribute of the div to con; then create the styles of the div and p elements within the css tag. ;Finally, set its position attribute to absolute positioning.

How to write css text at the bottom

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

Create a new html file, named test.html, to explain how to make the content in the bottom middle of the div in css.

How to write css text at the bottom

In the test.html file, use the div tag to create a module, and use the p tag inside to create a line of text.

How to write css text at the bottom

Set the class attribute of the div to con, which is used to style it using css below.

How to write css text at the bottom

In the test.html file, create the style settings of the div and p elements in the css tag. [Recommended: "css video tutorial"]

How to write css text at the bottom

##In css, style the div with the class name con . Set its position attribute to absolute positioning (position:absolute), width to 300px (width:300px), height to 300px (height:300px), and background color to yellow (background:yellow).

How to write css text at the bottom

In css, style the p element. Set its position attribute to absolute positioning (position:absolute), at the bottom of the div (bottom:0), the width is 100% (width:100%), and the text is displayed in the center (text-align:center).

How to write css text at the bottom

Open the test.html file in the browser and check the effect of the text being centered at the bottom of the div.

How to write css text at the bottom

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

Related labels:
css
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!