css布局小技巧之：让一个小图片水平靠右对齐，垂直居中

最新推荐文章于 2025-05-16 10:49:56 发布

蔚蓝色天空sky

最新推荐文章于 2025-05-16 10:49:56 发布

阅读量1.4w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/ytangdigl/article/details/78677015

css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的CSS布局案例，通过使用相对定位的div容器和绝对定位的图片元素实现特定效果。代码中展示了如何设置div的高度、边框以及图片的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、要实现的效果如下图：
这里写图片描述

这里写图片描述

2、css代码如下：

<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 </head>

 <body>

   <div style="width:99%;height:200px;border:1px solid rgb(204,204,204);position:relative;">
        <img src="rightto.png" style="width:10px;position:absolute;left:98%;top:50%;">
   </div>

 </body>
</html>