Home > Web Front-end > Front-end Q&A > How to change the word position in css

How to change the word position in css

藏色散人
Release: 2023-01-03 09:30:57
Original
5310 people have browsed it

How to change the font position in css: 1. Set the font position through text-align; 2. Use padding and margin to set the font position; 3. Use text-indent to set the font position; 4. Set through position The position of the font.

How to change the word position in css

The operating environment of this article: Windows7 system, css3 version, DELL G3 computer

css can use the text-align attribute to set the font position, text- The align attribute is used to set the alignment of text, such as left-aligned, right-aligned, and center-aligned content. CSS font position can also be achieved by setting padding, margin, text-indent, and position.

css sets the font position

1. text-align sets the font position

text-align syntax:

text-align : left | right | center | justify
Copy after login

text -align parameter value and description:

left: left alignment

right: right alignment

center: center

*justify: align both ends (not aligned Recommended, usually not used by most browsers)

Example:

p{
    text-align: left; /* 位置居左 */
    text-align: center; /* 位置居中 */
    text-align: right; /* 位置居右 */
}
Copy after login

2, padding, margin set font position

padding this attribute sets all internal margins of the element Width, or set the width of the padding on each side. Padding set on inline, non-replaced elements does not affect line height calculations; therefore, if an element has both padding and a background, it may visually extend into other lines and possibly overlap other content. . The element's background extends across the padding. Negative margin values ​​are not allowed.

The margin attribute sets the width of all margins of an element, or sets the width of the margins on each side.

Example:

p{
    padding: 100px 200px; /* 文字距离上下有100px内边距 距离左右有200内边距 */
    margin: 100px 200px; /* 文字距离上下有100px外边距 距离左右有200外边距 */
}
Copy after login

3. text-indent sets the font position

The text-indent attribute specifies the indentation of the first line of text in the text block.

Example:

p{
    text-indent: 50px; /* 首行缩进50px */
}
Copy after login

4. Position sets the position of the font

The position attribute specifies the positioning type of the element. When the set value is absolute, relative, or fixed, you can use the top, right, bottom, and left attributes for positioning.

p{
    position: fixed; /* 相对于浏览器窗口定位 */
    left: 100px;     /* 距离浏览器左边100px */
    top: 200px;      /* 距离浏览器上边200px */
}
Copy after login

【Recommended learning: css video tutorial

The above is the detailed content of How to change the word position in css. 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