Home >Web Front-end >Front-end Q&A >How to set right alignment in css

How to set right alignment in css

藏色散人Original: 2021-04-09 14:52:0529625browse

How to set right alignment in css: 1. Use the cssposition attribute to achieve the right alignment effect; 2. Use the float attribute to achieve the right alignment effect; 3. Use the text-align attribute to achieve the right alignment effect.

The operating environment of this article: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Detailed explanation of the right alignment method through css:

1. Right alignment through the position attribute of css

<h2>右对齐</h2>
<p>以下实例演示了如何使用 position 来实现右对齐:</p>
<div class="right">
  <p>元素右对齐</p>
</div>
css代码：
.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

Rendering:

How to set right alignment in css

2. Right alignment is achieved through the float attribute

<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" / alt="How to set right alignment in css" >
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>

Rendering:

How to set right alignment in css

3. Right alignment is achieved through the text-align attribute

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

Rendering:

How to set right alignment in css

[Recommended learning: css video tutorial]

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

Statement：

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

Previous article：How to set div size with cssNext article：How to set div size with css

See more

How to set right alignment in css

Related articles