css怎么设置右对齐
时间:2021-05-07
来源:互联网
今天PHP爱好者为您带来css设置右对齐的方法:1、通过使用cssposition属性来实现右对齐效果;2、通过float属性实现右对齐效果;3、通过text-align属性实现右对齐效果。希望对大家有所帮助。
本文操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
通过css设置右对齐方法详解:
1、通过css的position属性实现右对齐
<h2>右对齐</h2>
<p>以下实例演示了如何使用 position 来实现右对齐:</p>
<p class="right">
<p>元素右对齐</p>
</p>
css代码:
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
效果图:
2、通过float属性实现右对齐
<html>
<head>
<style type="text/css">
img
{
float:right
}
</style>
</head>
<body>
<p>在下面的段落中,我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img src="/i/eg_cute.gif" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
效果图:
3、通过text-align属性实现右对齐
<html>
<head>
<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
</body>
</html>
效果图:
以上就是css怎么设置右对齐的详细内容,更多请关注php爱好者其它相关文章!
-
币安怎么开网格交易?-自动化套利策略快速上手指南 时间:2025-07-05
-
美国对等关税缓冲期7月9日截止,特朗普拒延期限将通知加征惩罚性关税(美国关税减让表) 时间:2025-07-05
-
币安账户被锁定怎么办?-申诉流程与账号解封方法 时间:2025-07-05
-
东方树叶1.5升装2025年1月正式上市,大容量茶饮引领健康消费新风尚(东方树叶一件多少瓶) 时间:2025-07-05
-
币安怎么买空币种?-空头交易机制与操作指南 时间:2025-07-05
-
比特币稳定在10.7万美元上方 美国参议院通过4.5万亿支出法案 时间:2025-07-05
今日更新
-
javascript如何清除缓存
阅读:18
-
javascript是哪家公司开发的
阅读:18
-
css怎么设置div大小
阅读:18
-
javascript中string方法如何使用
阅读:18
-
javascript中的注释如何使用
阅读:18
-
javascript调用函数方法有哪些
阅读:18
-
纯CSS如何绘制三角形
阅读:18
-
什么是css伪类
阅读:18
-
javascript是由那几个部分组成
阅读:18
-
javascript如何删除div标签
阅读:18