Home > Web Front-end > HTML Tutorial > How to achieve right alignment in html

How to achieve right alignment in html

青灯夜游
Release: 2023-01-11 09:19:51
Original
71641 people have browsed it

html实现右对齐的方法:1、利用标签的align属性,语法“”;2、利用标签的style属性添加右对齐样式,语法“”。

How to achieve right alignment in html

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

html实现文本右对齐

方法1:利用标签的align属性

align 属性规定元素中的内容的水平对齐方式,值设置为right可右对齐内容。 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<div>测试文本,测试文本</div>
		<div align="right">测试文本,测试文本</div>
	</body>
</html>
Copy after login

效果图:

How to achieve right alignment in html

方法2:利用标签的style属性添加右对齐样式

style 属性规定元素的行内样式(inline style)。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<div>测试文本,测试文本</div>
		<div style="text-align:right;">测试文本,测试文本</div>
	</body>
</html>
Copy after login

效果图:

How to achieve right alignment in html

说明:

text-align 属性规定元素中的文本的水平对齐方式。

该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔,可以支持值 justify;不同用户代理可能会得到不同的结果。

描述
left 把文本排列到左边。默认值:由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。

推荐教程:《html视频教程

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

Related labels:
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