How to position text at the bottom of div with css-CSS Tutorial-php.cn

How to position text at the bottom of div with css

王林

Release： 2020-12-22 15:49:23

Original

7786 people have browsed it

Css method to place text at the bottom of a div: This can be achieved with the help of relative positioning and absolute positioning of the position attribute, such as [#txt{position:relative;} #txt p{position:absolute;}].

How to position text at the bottom of div with css

The operating environment of this tutorial: Windows 10 system, CSS3 version, this article is applicable to all brands of computers.

Background:

CSS does not have a parameter for aligning text at the bottom of the container. You can consider using the position attribute to solve this problem.

(Learning video sharing: css video tutorial)

Attribute introduction:

The position attribute specifies an element (static, relative, absolute or Fixed) type of positioning method.

Attribute value:

absolute Generates an absolutely positioned element, positioned relative to the first parent element other than static positioning. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.
fixed Generates fixed-positioned elements, positioned relative to the browser window. The position of the element is specified through the "left", "top", "right" and "bottom" attributes.
relative Generates a relatively positioned element, positioned relative to its normal position. Therefore, "left:20" adds 20 pixels to the element's LEFT position.
static Default value. Without positioning, the element appears in normal flow (ignoring top, bottom, left, right or z-index declarations).

Example:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
#txt{ 
 
 height:300px;
 width:300px;
 border:1px solid #333333;
 text-align:center;
 position:relative;
 
}
#txt p{
 position:absolute;
 bottom:0px;
 padding:0px;
 margin:0px
}
</style>
</head> 
 
<body>
<div id=txt>
<p>aadsad</p>
</div>
</body>
</html>

Copy after login

Related recommendations:CSS tutorial

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