ホームページ > 記事 > ウェブフロントエンド > CSSで右揃えを設定する方法
CSSで右揃えを設定する方法
- 藏色散人オリジナル
- 2021-04-09 14:52:0529588ブラウズ
CSS で右揃えを設定する方法: 1. cssposition 属性を使用して、右揃え効果を実現します。2. float 属性を使用して、右揃え効果を実現します。3. text-align 属性を使用して、右揃え効果を実現します。右揃え効果。
この記事の動作環境: 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;
}レンダリング:
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 によって実現されます:
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 ビデオ チュートリアル]
以上がCSSで右揃えを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSでdivサイズを設定する方法次の記事：CSSでdivサイズを設定する方法