How to align text at the bottom in css

How to align text at the bottom in css: 1. Set the "display:table-cell;ertical-align:bottom;" style to the element container containing the text; 2. Use the positioning attribute position to match bottom Property to set the position of the text and achieve bottom alignment of the text.

The operating environment of this tutorial: Windows7 system, HTML5&&CSS3 version. This method is suitable for all brands of computers.

Recommended: "css video tutorial"

How to align text at the bottom in css:

Method 1:

Create HTML element

<div>文字在div的底部对齐</div>

Add css style

div{
    width:200px;height:50px;  /*设置div的大小*/
    border:4px solid #beceeb; /*为了便于观察，显示出边框*/
    display:table-cell; 
    vertical-align:bottom;
  }

Method 2:

Create a module using div and create a piece of text using p tag. Add a class attribute to the div tag to set the style of the div and p tags.

In the css tag, set the style of the div through class, define its width as 250px, height as 400px, background color as gray, and use the position attribute to set the div to relative position.

Then set the style of the p tag, use the position attribute to set the p tag to absolute positioning, and use the bottom attribute to set the p tag text at the bottom, and set the p tag width to 100 %, use the text-align attribute to center align the text.

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

For more programming-related knowledge, please visit: Introduction to Programming! !

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