How to set the text position in html-HTML Tutorial-php.cn

How to set the text position in html

青灯夜游

Release： 2022-01-12 15:40:54

Original

53450 people have browsed it

htmlHow to set the text position: First use the position attribute to set the positioning type of the text element (absolute positioning or fixed positioning); then use the top, bottom, left and right attributes to set the offset value of the text element, and then set The position of the text element.

How to set the text position in html

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

htmlHow to set text position:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			p#p1{
				position: absolute;
				top: 20px;
				left: 20px;
			}
			p#p2{
				position: absolute;
				bottom: 0px;
				right: 20px;
			}
		</style>
	</head>

	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="How to set the text position in html" >
		<p id="p1">测试文本！测试文本！</p>
		<p id="p2">测试文本！测试文本！</p>
	</body>

</html>

Copy after login

Rendering:

How to set the text position in html

Description:

position attribute specifies the positioning type of the element.

This attribute defines the positioning mechanism used to establish the layout of the element. Any element can be positioned, but absolute or fixed elements generate a block-level box, regardless of the type of the element itself. A relatively positioned element is offset from its default position in normal flow.

Value	Description
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	Generate absolutely 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. So, "left:20" will add 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).

top attribute Specifies the top edge of the element. This property defines the offset between the top margin boundary of a positioned element and the top boundary of its containing block.

For relative definition elements, if top and bottom are both auto, their calculated values are both 0; if one of them is auto, the opposite of the other value is taken; if neither is auto, bottom will be the inverse of top's value.

bottom attributeSpecifies the bottom edge of the element. This property defines the offset between the bottom margin boundary of the positioned element and the bottom boundary of its containing block.

For absolutely positioned elements, the bottom attribute sets the unit above/below the bottom edge of the element that contains it. For relatively positioned elements, the bottom attribute sets the bottom edge of the element in units above/below its normal position.

left attribute Specifies the left edge of the element. This property defines the offset between the left margin edge of the positioned element and the left edge of its containing block.

right attributeSpecifies the right edge of the element. This property defines the offset between the right margin edge of the positioned element and the right edge of its containing block.

For static elements, it is auto; for length values, it is the corresponding absolute length; for percentage values, it is the specified value; otherwise, it is auto. For relatively defined elements, left always evaluates to right.

Recommended tutorials: html video tutorial, css video tutorial

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