• 技术文章 >web前端 >html教程

    html怎么实现右对齐

    青灯夜游青灯夜游2021-09-13 15:50:36原创700

    html实现右对齐的方法:1、利用标签的align属性,语法“<element align="right">”;2、利用标签的style属性添加右对齐样式,语法“<element style="text-align:right">”。

    本教程操作环境: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>

    效果图:

    1.png

    方法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>

    效果图:

    2.png

    说明:

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

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

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

    推荐教程:《html视频教程

    以上就是html怎么实现右对齐的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:html 右对齐
    上一篇:html5怎么实现列表 下一篇:html5怎么设置input只能输入数字
    线上培训班

    相关文章推荐

    • 手把手教你使用css给HTML字体添加边框效果(代码分享)• 一招教你使用css给HTML字体添加背景图(代码分享)• html5篇:实现页面跳转的5种方式(代码分享)• html篇:网页中如何实现输入框效果(代码详解)• html需要转义的字符有哪些

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网