• 技术文章 >web前端 >前端问答

    css怎么设置右对齐

    藏色散人藏色散人2021-04-09 14:52:05原创68

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

    效果图:

    4021a61c7c023604db0cadff3eb6139.png

    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>

    效果图:

    e10cf9fc2cd75293821bb5a54bb3fa7.png

    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>

    效果图:

    95c5acc2f82784b7f57d0f5d663ca08.png

    【推荐学习:css视频教程

    以上就是css怎么设置右对齐的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css
    上一篇:css怎么设置div大小 下一篇:什么是css伪类
    第15期线上培训班

    相关文章推荐

    • css图片怎么设置透明度• CSS如何设置div水平居中• css怎么取消颜色• css怎么实现禁止缩放• css怎么设置div大小

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网