【HTML+CSS】文字和图片保持同一水平线的三种方式

最新推荐文章于 2023-11-09 16:01:03 发布
最新推荐文章于 2023-11-09 16:01:03 发布
阅读量6k 收藏 6
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38415876/article/details/107258092
版权
本文介绍了如何使用HTML和CSS将文字与图片保持在同一水平线上，包括表格单元格方式、Flex布局方式和绝对定位方式。针对不同场景，提供了相应的代码示例，确保在图片大小变化时仍能保持对齐。
摘要由CSDN通过智能技术生成

推荐 方式2

方式1比较老
方式3 代码比较多 图片大小改变的话 对应的margin-top就得修改

方式1.table-cell方式
方式2.flex方式
方式3.absolute方式

css

.wechart1{
   
				display: block;
				display: table-cell;
				background: #fff;
				width: 100%;
				margin-bottom: 10px;
			}
			.wechart1 img{
   
				width: 30px;
				vertical-align: middle;
			}
			.wechart2{
   
				margin-top: 10px
最低0.47元/天 解锁文章
前端小板凳
关注
CSS综合案例——背景位置方位名词应用案例1——背景图片位置+文字位置的调整—图片和文字在一条水平线上
weixin_45586870的博客
10-21 611
案例是：做王者荣耀官网页面上的一块。 让图片和文字一起在恰当的地方居中显示，图片和文字在一条水平线上！ 方法：让背景图片在左+中心，文字缩进1.5em <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
css如何让两个元素在同一水平线上(文字和svg图片)
最新发布
m0_71835253的博客
01-09 1113
结果 : 两个都设置 vertical-align : middle 就可以了。2：margin会把div撑破，达不到预期效果（padding也是）3. 加了flex布局 之后, 因为我这个是在表格里面,无法居中了。起初用margin-top margin-bottom来协调。一开始写发现这两者不在同一水平线。
CSS控制图片和文字在同一行显示且对齐的3种方法
小猫爪子
04-19 5666
CSS控制图片和文字在同一行显示且对齐的3种方法 在HTML代码中，我们有时候需要在图片后面加上简单的文字进行说明，但默认情况下，图片置顶对齐，文字置底对齐，所以通常图片高，文字低，不能水平居中对齐。 要想解决这个问题，常见方法有3种： 通过添加css的 vertical-align:middle; 如果图片是背景图片，可以在css中设置背景图片； 把文字和图片分别放入不同的div中。 默认情况下如图： 1、添加上“vertical-align:middle”属性 <body> &lt
css文字在图片下方_【HTML+CSS】文字和图片保持同一水平线的三种方式
weixin_39634508的博客
11-29 972
方式1.table-cell方式方式2.flex方式方式3.absolute方式css.html<最终效果你有什么好的方式呢？欢迎留言
html把两条水平线,怎么调整两个层在同一水平线上啊_html/css_WEB-ITnose
weixin_33042645的博客
06-04 1066
CSS 层怎么设置两个层在同一水平线上是调整float属性么跪求啊回复讨论(解决方案)说清楚些如果是absolute定位的层,渲染到同一个容器内且让其top相同就平了margin-top，用这个？如果是两个div的话，仅仅只是出于同一水平线的话，就设置float属性为left就可以了，要注意宽度，如果两个div的宽度加在一起超过上层它们容器的宽度的话，第二个div就会掉到下层了；如果是两个div...
HTML让两张图在同一水平线上,html – 两个盒子,并排,每个50％,但两者都稍长,不在同一条线上？...
weixin_35045970的博客
06-29 1061
我正试图让两个并排的盒子占据屏幕的整个宽度.但是,当将宽度设置为50％时,每个盒子要扩展大约10px,宽度大于50％.我究竟做错了什么？#sides {padding-top: 40px;padding-bottom: 40px;background-color: white;}#leftside {width: 50%;background-color: grey;padding: 20px;m...
HTML+CSS-总结
04-02
- **水平线标签**：`<hr/>`用于分隔页面内容。 - **字体样式标签**： - `<strong>`：表示重要的文本，浏览器通常将其显示为粗体。 - `<em>`：强调文本，通常以斜体显示。 - **图像标签**： - **常见格式**：JPEG...
html+css知识点复习回顾，复习参考
weixin_55935744的博客
11-28 1187
这里写自定义目录标题一、HTML部分1、两个盒子2、图像标签3、相对路径和绝对路径4、超链接标签5、表格标签6、列表标签7、表单标签8、HTML5新特性二、CSS部分1、CSS选择器2、CSS字体属性3、CSS文本属性4、CSS引入方式5、CSS的元素显示模式6、CSS的背景样式7、CSS三大特性8、盒子模型9、传统网页布局的三种方式10、CSS属性书写顺序（规范代码）11、元素的显示与隐藏12、CSS高级技巧13、CSS3新特性 一、HTML部分 1、两个盒子 <div>、<span&g
html5+CSS3总结
ttttsuki的博客
01-24 1639
html5+CSS3总结 一、html5概述 html5是构建web内容的一种语言描述方式，适用于描述网页文档，被认为是互联网的核心技术之一。 二、html5基础 1.html5文档基本格式：包括<!DOCTYPE>文档类型声明、<html>根标记、<head>头部标记、<body>主体标记。 <!DOCTYPE html> <html lang="en"> <head> ​ <meta charset="
html中让文字和图片所在的div平行（绝对有用假一赔十）
大脸猫的博客
12-27 4719
试过了网上说的所谓的 vertical-align: middle 还有一些杂七杂八的方法发现一个都没用，那么只好祭出必杀技了。 首先创建一个父div，即图片和文字这两个子div的父节点，我们可以看到上方的div内部是段落文字，下方是图片。 <div> <div> <p class="content"> The top six countries by internet u
css如何使图片和文字在同一行显示,文字换行后和图片对齐
weixin_45932157的博客
04-28 1484
【代码】css如何使图片和文字在同一行显示,文字换行后和图片对齐。
html文字图片同一行,CSS控制图片和文字在同一行显示且对齐的3种方法
weixin_30497687的博客
06-04 8639
初学css的新手朋友经常会遇到一个问题，当文字和图片出现在同一行或者同一个div里面的时候，在浏览器中运行出来的显示效果往往是在不同的行，那么我们怎么才能在css中控制他们在同一行显示呢，其实方法有3种：1、通过添加css的“vertical-align:middle;”；2、如果图片是背景图片，可以在css中设置背景图片，然后设置文字的padding属性；3、把文字和图片分别放入不同的div中。...
H5 CSS3 实现文字图片同行居中
u2mithrandir的博客
05-27 645
H5 CSS3 实现文字图片同行居中 H5页面上常用到用户信息栏，用户头像和用户名称同行显示，一般图片高度会比文字高很多。这时候需要文字在整行中居中显示。查了网上的很多方法，都是不靠谱的。比如：设置div的line-height和height相同高度等。 这里实际使用了下述方法，亲测可用，同样试用与微信小程序的页面。 <html> <body> <div> <img src='image/test.jpg' width="90" height="90"/&gt
实现图片与文字在行内水平对齐
HKing147的博客
03-09 341
实现图片与文字在行内水平对齐
html使用图片、列表和CSS实现图文横排_具有滚动效果
weixin_45099830的博客
11-09 2888
这是大学网页设计与制作（html5+csss3+js）课程中使用图片、列表和CSS实现图文横排_具有滚动效果。/* 实现 div 内容在浏览器窗口中水平居中 *//* 将块级元素的li修改为行内块元素 *//*ul默认的上、下边距为12px*//*ul的左内边距默认为40px*//* 取消列表项前面的标记符号 */
【html css】DIV+CSS如何让图片和文字在同一行
热门推荐
清宵尚温的博客
08-11 3万+
【html css】DIV+CSS如何让图片和文字在同一行 前端react项目要写一个图标放在标题后面。 在div+css布局中，如果一行(或一个DIV)内容中有图片和文字的话，图片和文字往往会一个在上一个在下。 目前使用3种方法实现，我用百度图片作为示例。 1.添加CSS属性 vertical-align:middle; <style> a img { border: none; } .testdiv * { vertical-align: middle; }
div中让图片和文字在同一条水平线垂直居中（代码全部有注释）
进阶的博客
09-30 3816
最直接的办法其实是使用vertical-align这个属性，但由于我是半路出家学的css，很多基础知识掌握并不扎实，所以很多时候用vertical-align这个属性就会失效。于是在任务进行的过程中，我总结了一套万能的图片、文字垂直居中方法，记录在这里（脑子不好，为了便于以后使用时理解代码，在写demo时对所有代码进行了注释） 在线演示：DIV中的图片文字垂直居中Demo 代码说明：（图片就用的codepen上随手找的图片，不知道会不会哪天突然失效） HTML代码： <div>
Img 标签与span 文字不在同一水平线
06-08
如果在使用 img 标签和 span 标签时发现它们不在同一水平线上，这可能是由于 img 标签是一个行内块级元素，而 span 标签是一个行内元素，它们默认的对齐方式不同导致的。 要让 img 标签和 span 标签在同一水平线上，可以使用 CSS 中的 vertical-align 属性来调整它们的对齐方式。例如： ```html <span style="vertical-align: middle;">这是一个<span>与</span><img src="image.jpg">在同一水平线上的<span>文本</span></span> ``` 这将使 span 元素和 img 元素在垂直方向上居中对齐。你也可以将 vertical-align 属性设置为其他值，如 top、bottom、baseline 等，以实现不同的对齐方式。 另外，如果你想让 img 元素与 span 元素之间具有一定的间距，可以在 img 元素的样式中添加 margin-right 或者 span 元素的样式中添加 margin-left 属性。例如： ```html <span>这是一个<span>与</span><img src="image.jpg" style="margin-right: 10px;">有间距的<span>文本</span></span> ``` 这将在 img 元素的右侧添加 10px 的间距，与其后面的 span 元素产生一定的间距。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值