HTML 图文组合

最新推荐文章于 2024-08-31 22:20:20 发布
原创 最新推荐文章于 2024-08-31 22:20:20 发布 · 576 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css

本文介绍了HTML中实现图文组合的布局方法，包括使用line-height实现文本垂直居中，通过text-align让内容水平居中，以及利用margin: 0 auto使块元素水平居中。特别提到，解决img元素下方间隙的方法是将其转换为块元素。

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

居中

1. line-height = height 文本垂直居中

2. text-align: center; 写在父级，子级中的行标签，行块标签，文本内容水平居中

3. margin: 0 auto; 写在块元素，相对于父级水平居中

注：img 行块元素默认下边会产生一个间隙，解决方案转化为块元素

test01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test01</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .item {
            width: 50px;
            height: 60px;
            /* background-color: pink; */
            text-align: center;
            overflow: hidden;
            float: left;
        }
        .item img {
            width: 28px;
            height: 28px;
            /* img默认下方有个隔离边，修改成block会去掉 */
            display: block;
            margin: 5px auto;
        }
        .item p {
            font-size: 12px;
            font-weight: 200;
            /* background-color: gold; */
        }
    </style>
</head>
<body>
    <div class="item">
        <img src="img/test01/1.png" alt="">
        <p>话费</p>
    </div>
    <div class="item">
        <img src="img/test01/2.png" alt="">
        <p>机票</p>
    </div>
    <div class="item">
        <img src="img/test01/3.png" alt="">
        <p>酒店</p>
    </div>
</body>
</html>

<!-- 居中:  （10遍）
1. line-height = height 文本垂直居中

2. text-align:center 写在父级，
子级中的行元素，行块元素，文本内容水平居中

3. margin: 0 auto 写在块元素，相对于父级水平居中 -->

 test02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test02</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .item {
            width: 140px;
            height: 63px;
            /* background-color: pink; */
            border-bottom: 1px solid gray;
        }
        .item img {
            width: 36px;
            height: 36px;
            float: left;
            margin: 13px 2px;
        }
        .item p {
            width: 100px;
            height: 63px;
            line-height: 63px;
            float: left;
        }
    </style>
</head>
<body>
    <div class="item">
        <img src="../img/test/test02/1.jpg" alt="">
        <p>手机</p>
    </div>
    <div class="item">
        <img src="../img/test/test02/2.jpg" alt="">
        <p>电视</p>
    </div>
    <div class="item">
        <img src="../img/test/test02/3.jpg" alt="">
        <p>平板</p>
    </div>

</body>
</html>

 work01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>work01</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 750px;
            background-color: #f7f7f7;
        }
        .wrap .item{
            float: left;
            width: 150px;
            height: 280px;
            /* background-color: pink; */
            text-align: center;
        }
        .wrap .item img{
            width: 100px;
            height: 140px;
        }
        .wrap .item p{
            width: 100px;
            text-align: center;
            margin-left: 25px;
        }
        .wrap .item .d1{
            /* height: 40px; */
            line-height: 20px;
            margin-bottom: 10px;
        } 
        .wrap .item .d2{
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            color: #dbdbdb;
        }
    </style>
</head>
<body>
    <div class="wrap">
    <div class="item">
        <img src="../img/work/work01/1.jpg" alt="">
        <p style="height: 40px; line-height: 20px;" class="d1">爆诞： 世界科幻200年</p>
        <p class="d2">音频专栏</p>
    </div>
    <div class="item">
        <img src="../img/work/work01/2.jpg" alt="">
        <p class="d1">工作之苦—解决2020年代的工作新问题</p>
        <p class="d2">音频专栏</p>
    </div>
    <div class="item">
        <img src="../img/work/work01/3.jpg" alt="">
        <p class="d1">和思想家一起漫步——20世纪留给我们的10种远见</p>
        <p class="d2">音频专栏</p>
    </div>
    <div class="item">
        <img src="../img/work/work01/4.jpg" alt="">
        <p class="d1">用性别之尺丈量世界——18堂思想课解读女性问题</p>
        <p class="d2">音频专栏</p>
    </div>
    <div class="item">
        <img src="../img/work/work01/5.jpg" alt="">
        <p class="d1">穿越文学经典——复旦梁永安的爱情课</p>
        <p class="d2">音频专栏</p>
    </div>
    <div class="item">
        <img src="../img/work/work01/6.png" alt="">
        <p class="d1">拍张好照片——跟七七学生会摄影</p>
        <p class="d2">音频专栏</p>
    </div>
    <div class="item">
        <img src="../img/work/work01/7.png" alt="">
        <p class="d1">一切美好的事物都与你有关——21天走出自尊</p>
        <p class="d2">音频专栏</p>
    </div>
    <div class="item">
        <img src="../img/work/work01/8.png" alt="">
        <p class="d1">哲学闪耀时——不一样的西方哲学史</p>
        <p class="d2">音频专栏</p>
    </div>
    <div class="item">
        <img src="../img/work/work01/9.jpg" alt="">
        <p class="d1">作家的诞生——12位殿堂级作家的写作课</p>
        <p class="d2">音频专栏</p>
    </div>
    <div class="item">
        <img src="../img/work/work01/10.jpg" alt="">
        <p class="d1">52倍人生——戴锦华大师电影课</p>
        <p class="d2">音频专栏</p>
    </div>
</div>
</body>
</html>

 work02

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>work05</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 620px;
            height: 122px;
            /* background-color: pink; */
            overflow: hidden;
        }
        .wrap .tu{
            width: 92px;
            height: 92px;
            margin: 15px 20px 15px 24px;
            background-size: 100% 100%;
            border: 1px solid #eaeaea;
            border-radius: 50%;
            float: left;
        }
        .wrap .item{
            width: 350px;
            height: 122px;
            /* background-color: aqua; */
            float: left;
        }
        .wrap .item .d1{
            height: 40px;
            line-height: 40px;
            font-size: 25px;
            color: #333333;
            margin-top: 19px;
            margin-bottom: 4px;
        }
        .wrap .item .d2{
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            color: #969696;
            margin-bottom: 19px;
        }
        .wrap .look{
            float: left;
            width: 124px;
            height: 122px;
            /* background-color: gold; */
        }
        .wrap .look span{
            float: left;
            height: 40px;
            line-height: 40px;
            font-size: 25px;
            color: #3dbf40;
            margin-top: 19px;
            margin-left: 30px;
        }
        .wrap .look .d3{
            float: left;
            height: 40px;
            line-height: 40px;
            font-size: 25px;
            color: #3dbf40;
            margin-top: 19px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="tu" style="background-image: url(../img/work/work05/1.webp)"></div>
        <div class="item">
            <p class="d1">卢璐说</p>
            <p class="d2">写了2133.8k字·37.7k喜欢</p>
        </div>
        <div class="look">
            <span>+</span>
            <p class="d3">关注</p>
        </div>
    </div>
    <div class="wrap">
        <div class="tu" style="background-image: url(../img/work/work05/2.webp)"></div>
        <div class="item">
            <p class="d1">简书钻首席小管家</p>
            <p class="d2">写了458.9k字·115.3k喜欢</p>
        </div>
        <div class="look">
            <span>+</span>
            <p class="d3">关注</p>
        </div>
    </div>
    <div class="wrap">
        <div class="tu" style="background-image: url(../img/work/work05/3.webp)"></div>
        <div class="item">
            <p class="d1">格列柯南</p>
            <p class="d2">写了722.5k字·18.4k喜欢</p>
        </div>
        <div class="look">
            <span>+</span>
            <p class="d3">关注</p>
        </div>
    </div>
    <div class="wrap">
        <div class="tu" style="background-image: url(../img/work/work05/4.webp)"></div>
        <div class="item">
            <p class="d1">Hobbit霍比特人</p>
            <p class="d2">写了429.5k字·1.9k喜欢</p>
        </div>
        <div class="look">
            <span>+</span>
            <p class="d3">关注</p>
        </div>
    </div>
    <div class="wrap">
        <div class="tu" style="background-image: url(../img/work/work05/5.webp)"></div>
        <div class="item">
            <p class="d1">梅拾樱</p>
            <p class="d2">写了265.5k字·31.5k喜欢</p>
        </div>
        <div class="look">
            <span>+</span>
            <p class="d3">关注</p>
        </div>
    </div>
</body>
</html>

 

章鱼Cc_yoo
关注
前端入门——基于html和css常见图文组合实现
qq_45727209的博客
05-22 463
此文章提供一些基于html和css的常见图文组合实现的代码参考，包括常见的书籍专栏、院线电影、学习专栏、小说作者推荐、商品评价、歌曲榜单、电商商品陈列、新闻条目陈列等样式，持续更新中...
简洁图文组合网站模板
12-13
"简洁图文组合网站模板"正是这样一种工具，专为那些希望展示个人或企业投资组合的用户设计。这款模板以其简洁、直观的设计理念，提供了丰富的功能和自定义选项，以帮助用户轻松地创建引人入胜的在线平台。 首先，...
文字图片合并.html
11-10
号外，号外，在线实现html+css+js生成图片带文字logo的图片功能，简单易上手，赶快试试看吧！
在html中图文结合的怎么写,html实现文字绕排示例(html图文混排)
weixin_29870701的博客
05-31 1208
1.文字绕图如果我们使用正常的，例如：复制代码代码如下:这里是普通的。国内的VB网站中vbgood以每日更新，资料量丰富，而深受程序爱好者的喜欢。这样的语句中图片比文字高度要高，则文字上部会有空白出现。页面的效果非常不好。如何解决呢？请看这个代码：复制代码代码如下:这里是绕排的。国内的VB网站中vbgood以每日更新，资料量丰富，而深受程序爱好者的喜欢。在img这个元素中加入这个属性就可以解决：a...
在html中图文结合的怎么写,HTML作业1（图文混排）
weixin_34221892的博客
05-31 699
NO.1传智播客设计学院h1{font-family: Microsoft YaHei;} 传智播客设计学院传智播客设计学院成立于2010年，专注于平面设计师、网页设计师、UI设计师的培养。现开设JavaEE、Android、PHP、UI、IOS、前端、C++、网络营销、Python、云计算、全栈工程师、产品经理等培训学科，直营分校遍布北京、上海、广州、深圳、武汉、郑州、西安...
在html中图文结合的怎么写,字形合一，网页设计中的图文配
weixin_39555715的博客
05-31 536
前言有人说，中文网页的设计其实没有字体设计这一环节，因为在网页中能用到的中文字体非常有限，能用的也只有黑体、宋体、微软雅黑等，这给中文网页的美感带来了折损。相比英文对字体的斟酌，网页上的中文字体显得太随意。当然，这种说法有一定的正确性，但我们应该换个角度看。中文的网页中的字体的确是局限在这几款字体中，但不代表中文网页就没有字体设计这一环节。认识网页设计中的“字”首先，我们简单将网页里的文字分为可替...
html图片和超链接组合
qq_41821067的博客
09-10 2513
把标签置入标签里面就可以
大气清爽冰淇淋图文组合HTML5模板
06-01
【大气清爽冰淇淋图文组合HTML5模板】是一款专为展示冰淇淋产品设计的网页模板，适用于创建清新、直观且吸引人的线上店铺或产品展示网站。这款模板以其简洁大气的设计风格和丰富的图文展示功能，能够有效地吸引用户...
简洁图文组合网站模板是一款非常简洁实用的投资组合类网站模板。.zip
02-21
"简洁图文组合网站模板"就是这样的一个工具，专为投资组合类网站设计，它以其简洁和实用性的特点脱颖而出。这款模板以其高效的布局和清晰的视觉传达能力，旨在帮助个人或企业展示他们的作品、项目或服务，吸引潜在...
HTML教程(最全的图文并茂教程).ppt
05-07
HTML教程(最全的图文并茂教程)
html5多张图片合成代码
05-18
html5多张图片合成代码html5多张图片合成代码html5多张图片合成代码
HTML标签图文详解（二）
liuzuoping的博客
12-25 877
上篇博文我们对HTML有了大致的认识并且熟悉了一些基本的标签 HTML标签图文详解（一） 接下来我们开始更加深入的学习 <body>标签的属性 其属性有： bgcolor：设置整个网页的背景颜色。 background：设置整个网页的背景图片。 text：设置网页中的文本颜色。 leftmargin：网页的左边距。IE浏览器默认是8个像素。 topmargin：网页的上边距。 rig...
html显示图文内容,单图文内容.html
weixin_36437103的博客
06-04 174
单图文内容$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPat...
HTML的图文混排/常见的HTML图像格式/图像标签与属性/学习笔记
No1banana的博客
01-21 2395
一、常见的图像格式 GIF:支持动画，支持透明，无损格式的图像格式，常由于logo小图标等色彩单一的图像 PNG：（PNG8和真色彩PNG）支持透明或半透明图像，体积小，不支持动画 JPG：色域广，损压缩图像，不支持动画和透明 二、图像标签(单标签) 使用图像标签<img>用以插入图片，写法<img src = "图像url（路径/地址）"/> 常见的img标签的属性： 属性名 属性值 描述 src URL 图像的路径 alt 文本 图像不能现实时的替换文本
html5图形组合
xyy_933的博客
05-08 952
图形的组合   function draw(id){   var c=document.getElementById(id);   var cxt=c.getContext("2d");   var oprtns=new Array(   "source-atop",   "source-in",   "source-out",   "source-over",   "des
HTML 块
weixin_44664352的博客
09-12 296
HTML <div> 和 <span> 可以通过 <div> 和 <span> 将 HTML 元素组合起来。 大多数 HTML 元素被定义为块级元素或内联元素。 HTML 块元素 块级元素在浏览器显示时，通常会以新行来开始（和结束）。 例子：<h1>, <p>, <ul>, <table> HTML 内联元素 内联元素在显示时，通常不会以新行开始（和结束）。 例子：<b>, <t
HTML实现图文混排效果
最新发布
lxlc55的博客
08-31 1930
在HTML中实现图文混排效果，‌通常是通过结合HTML的<img>标签用于插入图片，‌以及CSS来控制图片和文本的布局。‌下面是一个基本的图文混排示例：‌。
如何使用HTML进行一个简单的图文混排
xxiLz_的博客
01-23 8812
使用HTML进行一个简单的图文混排 题目要求： 完成效果图： 首先我们打开DW，使用快捷键新建一个文件，给它命名 根据题目要求标题为<h2>标签 有三段文字分别用三个<p>标签，进行相应的文字填充 然后插入图片，因为图片保存地方和html文件保存在同一个文件夹,所以可以直接输入图片名字 依题目要求，用align属性使得图片在最左边，用hspace属性编辑图片两侧边距为30，正文内容使用<font>标签设置颜色大小，最后效果如下：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值