css如何让两个元素在同一水平线上(文字和svg图片)

于 2024-01-09 16:22:58 发布
阅读量977 收藏 7
点赞数 11
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71835253/article/details/135483544
版权

一开始写发现这两者不在同一水平线

起初用margin-top margin-bottom来协调

发现效果并不好

1：写法僵硬
2：margin会把div撑破，达不到预期效果（padding也是）

3. 加了flex布局 之后, 因为我这个是在表格里面,无法居中了 

结果  :    两个都设置 vertical-align : middle 就可以了

各位可以试试 !!!

文档地址: vertical-align - CSS：层叠样式表 | MDN

沙尘暴炒饭
关注
  • 11
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
【HTML+CSS】文字和图片保持同一水平线的三种方式
weixin_38415876的博客
07-10 5921
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; display: flex;
css3 svg文字轮廓边框特效
07-24
总之，CSS3 SVG文字轮廓边框特效是网页设计中的一个创新点，结合了CSS3的动画能力和SVG的矢量特性，可以创造出富有表现力和动态感的文字元素。通过理解这些技术并实践，设计师可以提升网页的视觉吸引力，为用户提供...
Flex： flash聊天框 表情+文字 图文混排 （思路）
Winters_huang'Blog
05-15 2596
PS：具体实现代码
html使div内部元素水平排列_CSS 让div,span等块级、非快级元素排列在同一行
weixin_39683526的博客
01-12 1340
让div,span等块级、非快级元素排列在同一行by:授客QQ：1033553122例子：让两个div排列在同一行给div添加float样式div{float: left;}div1div2说明：让div和span排列在一起也可以用上述上方法例子：让div和两个span排列在同一行额外要求，然第二个span排列在最右侧使用display-inline(为什么要使用display: inline-b...
伸缩盒（弹性）布局------display:flex
qq_41377857的博客
07-07 690
display:flex; 让父元素变成伸缩盒布局，子元素默认水平排列（row）； flex-wrap:wrap;换行； flex-direction：column；子元素竖着排列； flex是flex-grow、flex-shrink、flex-basis的缩写 flex-grow：定义弹性盒子项（flex item）的拉伸因子 flex-...
处理两个div不在同一行（自用，两种方法）
cd243643664的博客
06-09 3428
处理两个div不在同一行
CSS3 SVG创意文字线条填色动画特效
06-11
在本文中，我们将深入探讨如何使用CSS3和SVG技术创建具有创意的文字线条填色动画特效。这个特效尤其适用于网页设计，可以为网站增添独特的视觉吸引力，例如在“LOVE”文字样式中展示。 首先，SVG（Scalable Vector ...
CSS3 SVG波浪线条动画特效
07-24
在IT行业中，CSS3和SVG是两个至关重要的技术，它们为网页设计提供了强大的表现力和交互性。在本主题中，我们将深入探讨“CSS3 SVG波浪线条动画特效”，这是一种利用CSS3和SVG实现的线条波浪滚动和弯曲动画效果。 ...
使用CSS混合模式和SVG来动态更改产品图片的颜色
12-13
前两天在Codepen看到了@Kyle Wetton写的一个示例， 使用CSS混合模式和SVG来改变沙发的颜色 。非常有意思的一案例。这让我想起了在实际的一些业务场景中的运用，比如说一些美妆的应用中，就有类似的场景。不知道大家...
CSS3 SVG文字线条填色动画特效特效代码
03-20
1. **创建SVG文本元素**：首先，使用SVG的`<text>`标签在页面上创建文字，可以设置字体、大小、位置等属性。例如： ```html <svg> <text x="50" y="50">LOVE </svg> ``` 2. **分离文本路径**：为了实现线条...
flex 布局文本与数字不水平对齐问题?给父元素加一个行高
qq_42859450的博客
11-27 1464
父元素：.appt-box { display: flex; align-items: center; } 如下图：文本和数字不在同一水平线上，原因：数字的高小于文本的高，给父元素添加一个行高可解决 父元素：.appt-box { display: flex; align-items: center; line-height: .3rem;//大小自己设置 } 加行高之后的效果如下： ...
img图片/svg图标与文字无法对齐
G佳伟
04-26 2882
img图片/svg图标与文字无法对齐，新加图片与文字对不齐问题如何调整svg图标/img图片与文字无法对齐解决方法
Div标签里放img和span标签实现垂直水平居中
m0_53703061的博客
08-12 8516
img和span标签在div中实现垂直水平居中
CSS初入门：设置子元素水平居中的方式
lalala_dxf的博客
04-01 5446
问题描述： 用几种方式实现元素位于父元素的水平居中位置，如图： 解决 方式一 通过控制子元素的左边框和右边框来达到居中的效果。 在那之前，我先举个我遇到过的错误示范 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam
css一张图片和文字在同一水平线上显示市
shiki0083的笔记
04-16 8234
经常遇到一个问题，当需要让一张图片和文字在同一水平线上显示市，图片总是会比文字高出一截，可以说非常不好看了。 解决方法： HTML代码如下 <img src="../static/image/ok.png" /> <p class="tip1">密码修改成功，请重新登陆！</p> 1 2 CSS代码如下 p{ display: inline-bl...
让文本框和按钮在同一水平线上
热门推荐
夏悠桥沐的专栏
08-10 2万+
页面显示中，经常性的，文本框和按钮不再同一水平线上，让页面显得不好看，查询资料，和尝试下，得到下面一种解决方法： 采用浮动和设置高度 先让文本框左浮动，按钮左浮动，让两者的上边界在同一水平线上， 再设置按钮的高度，让其和文本框一样高，那么两者就可以在同一条水平线上了下方是一个例子：<select style="Float:left;height:30px"> <option value
【解决方法】element-ui 中输入框input与下拉选择框没有在一条水平线上
追寻上飞的博客
07-19 1653
可以看到行元素内的子元素顶部都是对齐的，而且下拉选择框的顶部和行的顶部是有间隙的，因此问题就出现在对齐的属性上。如图所示，左边的输入框和右边的下拉选择框不在同一水平线上。相对于该元素所在行的基线的垂直对齐。...
HTML让两张图在同一水平线上,html – 两个盒子,并排,每个50％,但两者都稍长,不在同一条线上？...
weixin_35045970的博客
06-29 1023
我正试图让两个并排的盒子占据屏幕的整个宽度.但是,当将宽度设置为50％时,每个盒子要扩展大约10px,宽度大于50％.我究竟做错了什么？#sides {padding-top: 40px;padding-bottom: 40px;background-color: white;}#leftside {width: 50%;background-color: grey;padding: 20px;m...
HTML+CSS笔记
HanLimo123的博客
04-21 1228
HTML+CSS笔记web标准HTML基础html页面固定结构语法规范注释标签的组成和关系标签学习标题标签排版标签段落标签换行标签水平线标签文本格式化标签媒体标签图片标签路径音频标签视频标签链接标签列表标签无序列表有序列表自定义列表表格标签表格相关属性表格标题和表格单元格标签表格的结构标签合并单元格表单标签input系列标签button系列标签select下拉菜单标签textarea文本域标签label标签语义化标签没有语义的布局标签有语义的布局标签（了解）--手机端字符实体css（层叠样式表）基础css语
CSS在SVG画好的线条上运动
最新发布
03-26
可以使用CSS3的动画特性（animation）来实现SVG线条上的运动。下面是一个示例： SVG代码： ``` <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> </svg> ``` CSS代码： ``` line { stroke...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

沙尘暴炒饭

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

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

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

打赏作者

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

抵扣说明：

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

余额充值