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

Home

Web Front-end

HTML Tutorial

How to set text downward in html

藏色散人

Feb 25, 2021 am 11:28 AM

html

How to set the text downward in html: first create an HTML sample file; then define a piece of text content in the body; then set the css attribute "position:relative" in the parent element; finally, in the child where the text is stored Just set the css attribute in the element to "boottom:0".

How to set text downward in html

The operating environment of this article: Windows7 system, HTML5&&CSS3, Dell G3 computer

1. If it is text or other block-level elements. Use positioning ideas. position: absolute, then boottom: 0. The parent element should be set to position: relative.

Because absolute positioning is relative to the nearest non-statically positioned element. However, if there are multiple elements within the same parent element and need to be moved with absolute positioning, you need to be aware that if you do this directly, it will cause those elements to overlap instead of being arranged normally like float.

This is because they have the same parent element. After using absolute positioning, they will move to the left of the parent element instead of staying at the original position.

In order to solve this situation, you need to nest a parent element for those elements that need to be moved, let their parent elements position them, and set relative to their parent elements, so that the original parent elements become The master element.

In this way, after setting the absolute positioning and position attributes for them, there will be no overlapping effect, because they will move within the limits of the parent element and cannot escape. This way it doesn't overlap and stays close to the bottom, but you need to be careful.

The new nested parent element requires a fixed height, which is higher than the inner element. Otherwise, his height would be stretched by internal elements.

[Recommended: HTML video tutorial]

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<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>文字靠下</p>
</div>
</body>
</html>

Copy after login

Rendering:

How to set text downward in html

2. If it is text (I haven’t tried it with block-level elements, you can try it later). Then you need to set the div wrapping the text to display: table-cell vertical: bottom. This way the text is attached to the bottom of the div.

Example:

HTML:

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

Copy after login

css style:

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

Copy after login

Rendering:

How to set text downward in html

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

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