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-10-17
-
重返未来:1999迷思海-500m怎么通关 2025-10-17
-
解忧小食光阵容怎么搭配-阵容搭配玩法详细 2025-10-17
-
如鸢周年庆魂魂迷城活动-红月四阶段绵竹无张邈 2025-10-17
-
荒原曙光冰晶剑怎么获得-冰晶剑获取方法详解 2025-10-17
-
燕云十六声新门派墨山道-晋升以及常见问题解答 2025-10-17