HTML5+css3图片文本文字位置（绝对位置）

最新推荐文章于 2026-04-30 05:29:39 发布
原创 最新推荐文章于 2026-04-30 05:29:39 发布 · 3.7k 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #html #css

本文详细介绍了CSS中的绝对（position:absolute;）和相对（如padding, margin）定位方法，指导如何设置图片和文本位置。理解内外边距和浮动技巧是布局关键。

一、position: absolute;

left+距离px    right+距离px      top+距离px       bottom+距离px

注：以浏览器左上角为原点，向下向右延申为正。

绝对位置可设置图片以及文本文字位置

二、相对位置（通过距离浏览器四边距离确定的位置）

1、padding

padding-left（左内边距）padding-top（上内边距）

padding-right（右内边距）padding-bottom（下内边距）

2、margin

margin-left（左外边距）margin-top（上外边距）

margin-right（右外边距）margin-bottom（下外边距）

※※※（两种方法均需要在css中设置）※※※

CSS - 通用左边图片，右边内容，并且控制长度溢出处理模板（vue | uniapp | 微信小程序）
🏆 前端领域优质创作者
09-20 1036
通用模板，可适用于任意前端项目。如下图所示，手机电脑通用。
普歌-前端复习总结HTML+CSS-超详细，超全面（内容较多，建议收藏）
weixin_52791256的博客
04-05 1万+
普歌-HTML5+CSS复习总结一.HTML基础二级目录三级目录 一.HTML基础 二级目录 三级目录
CSS如何实现左图右文
The_upside_of_down的博客
09-04 2万+
如何用CSS实现左图右文？ 我们现在来看CSS代码： <style> .block img { float: left; margin-right: 10px; width: 100px; height: 100px; } .block p { width: 200px; ...
html实现 左图右文_div+css中,左边是图片,右边是文字怎么写
热门推荐
weixin_34898320的博客
12-24 2万+
展开全部用一个div作为主框架，嵌套图片和文字内容两个div，同时使用浮动功能，代码步骤如下：636f707932313133353236313431303231363533313333663064381.先输入：，建立一个主框架，如下图红框所示；2.设置框架的样式，根据需要设置即可，如下图红框所示，代码如下：.header{width: 960px; ...
保姆级教程：给ZLMediaKit的WebRTC服务配置HTTPS和自定义域名（解决摄像头调用问题）
最新发布
weixin_30458043的博客
04-30 362
本文提供ZLMediaKit WebRTC服务的HTTPS与自定义域名配置的详细教程，解决浏览器摄像头调用的安全限制问题。涵盖证书配置、域名解析、内网解决方案及性能优化技巧，帮助开发者从本地测试环境顺利迁移到生产环境。
使用HTML实现图文混排
pjsunshine的博客
01-25 1万+
准备好图片，通过<img src=“图片”>图像标签导入图片，利用align=“left”进行左对齐,以及设置图片的水平边距hspce=“30”， width进行图片大小修改， 利用<h2>突出标题，并设置相关属性。 利用<p>段落标签进行三段文字分段。 源代码： 实现效果： ...
css：图文效果（左图右文字）
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
11-27 7699
效果 代码 <view class="before-item"> <view class="item-left"> <image class="item-left" src="图片url" /> </view> <view class="item-right"> <view cla...
CSS怎么把图片定位叠加,如何在图像上的自由位置叠加字符
weixin_42607969的博客
08-03 1100
如何使用HTML + CSS在图像上的自由位置叠加字符我想在招牌图像上叠加字母你有没有想过在图像上显示字符和输入表格等？例如，如果要显示符合图像的招牌部分的字符，如图所示。即使您想在图像上显示字符，也不必精细地划分一个图像并将其发布或使用表格元素。使用CSS(样式表)，您可以逐个像素地微调显示位置，并且可以轻松地在图像上叠加字符。这一次，我们将向您展示如何在网页上发布的图像上叠加任意对象，如字符和...
前端html实现鼠标停在图片上出现动画效果
阿拉斯加头头的博客
09-19 7558
前端html鼠标移入图片动作效果 效果展示： 没有用到js和css <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <s
HTML5与CSS3
m0_53278405的博客
10-05 157
目录HTML5 网页结构文本控制标签文本样式标签文本格式化标签特殊字符标签图像标签CSS3CSS样式表CSS基础选择器CSS文本样式字体样式文本外观属性CSS层叠性和继承性CSS的优先级盒子盒子模型概念< div >标签盒子的宽与高盒子模型相关属性 HTML5 网页结构 < ! – 注释语句 --> 文本控制标签 < h1 > ~ < h6 > < p >< / p > < hr 属性=“属性值” /> 水平线标签 &
css左边是图片右边是文字方法
qq_44699174的博客
07-09 2万+
<div id="container"> <div id="photo"><img src="图片地址" /></div> <div id="content"> <div id="text">文字介绍</div> <div id="news">新闻内容</div> </div> </div> CSS： #container {width: 100%;} #photo {flo
html怎么让图片在左侧文字在右边,网页设计 怎么让图片在左 文字在右
weixin_35146639的博客
06-03 1万+
使用PS设计网站的话，有很多要注意的地方，按我自己的理解，大致有屏幕大小和文字表现两个特别需要注意的方面。我们都知道，现在的电脑屏幕有大有小，既要考虑到大屏幕又要考虑到10寸小本。。。所以，大家根据主流显示器的分辨率，一般都会把页面的宽度限制在1000像素以内，同时，大多页面都会设置居中。具体的分辨率以及尺寸你可以百度一下相关的内容与说明。一般来说，960和980是两个比较常用的宽度。第二个关键的...
HTML实现左图右文字网页设计
m0_65230676的博客
05-15 2760
【代码】HTML实现左图右文字网页设计。
左图右文字html代码,CSS左图右文混排布局
weixin_42297439的博客
06-10 2663
CSS左图右文混排布局* {margin:0;padding:0;}h3 {font-size:12px;color:#0066CC;line-height:2em;}p {font-size:12px;text-indent:2em;line-height:1.5em;}#container {width:300px;margin:0 auto;margin-top:10px;padding-r...
设置html里面图片和文字的位置
weixin_44494211的博客
06-05 2万+
如何设置html里面图片和文字的位置 1.首先是图片 <style type="text/css"> body{ background-image:url("src/注册成功最终定稿版.png");//存放图片的路径 background-attachment:fixed; background-repeat:no-repeat; background-position:50% 15%;//确定图片在网页的位置 } </style> 解
html将文字放在图片右边_HTML代码将图像放在左边，文本放在屏幕的右边，下边是页脚？...
weixin_39760721的博客
12-21 3820
This is what my page should look like ---------Header (will put code to load header from external site here)--Image on left side - Text on right side.--------Footer ((will put code to load footer from...
css图片的自适应排版
黄治文的博客
03-14 4171
不知道大家有没有在做多个图片排布的时候感觉会有些吃力，尤其是那些图片的长宽都是不规范的时候，直接填充图片容易拉伸，定宽或者定高，最后都会有些超出边界，下面就是我总结的解决方法。 方法一 ：css的background属性来设置背景图 知识点总结 background的属性有以下这些： background-color background-position background-size...
html5图片跟文字的位置,用canvas怎么让图片在位子的下面 一加图片文字就看不到了（有例子最佳）...
weixin_42362491的博客
06-04 633
@font-face {font-family:"sor";src:url('fonts/FZZBHFW.TTF');}@font-face {font-family:"sy";src:url('fonts/gangbixingshu.TTF');}body{margin: 0; padding: 0; font-family:"sy";}#canvas{display: block; margi...
H5 CSS3 实现文字图片同行居中
u2mithrandir的博客
05-27 781
H5 CSS3 实现文字图片同行居中 H5页面上常用到用户信息栏，用户头像和用户名称同行显示，一般图片高度会比文字高很多。这时候需要文字在整行中居中显示。查了网上的很多方法，都是不靠谱的。比如：设置div的line-height和height相同高度等。 这里实际使用了下述方法，亲测可用，同样试用与微信小程序的页面。 <html> <body> <div> <img src='image/test.jpg' width="90" height="90"/&gt
H5页面左图右边文字如何布局
weixin_30266829的博客
05-10 1910
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>商品</title><metacontent="yes"name="apple-mobile-web-app-capable"><metac...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

扶苏怎么会服输

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值