CSSで右揃えを設定する方法-フロントエンドQ&A-php.cn

CSSで右揃えを設定する方法

藏色散人

リリース： 2023-01-04 09:35:43

オリジナル

29636 人が閲覧しました

CSS で右揃えを設定する方法: 1. cssposition 属性を使用して、右揃え効果を実現します。2. float 属性を使用して、右揃え効果を実現します。3. text-align 属性を使用して、右揃え効果を実現します。右揃え効果。

CSSで右揃えを設定する方法

この記事の動作環境: Windows7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

cssによる右寄せ方法の詳しい説明:

1. cssのposition属性による右寄せ

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

ログイン後にコピー

レンダリング:

CSSで右揃えを設定する方法

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" / alt="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 によって実現されます:

CSSで右揃えを設定する方法

3. 右揃えは、テキストによって実現されます。 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で右揃えを設定する方法