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

最新推荐文章于 2024-01-23 18:03:54 发布
最新推荐文章于 2024-01-23 18:03:54 发布
阅读量1.6k 收藏 7
点赞数 11
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71835253/article/details/135483544
版权
博客讲述了在编写代码时遇到两个元素不在同一水平线的问题，尝试用margin和padding协调效果不佳，使用flex布局在表格里无法居中，最终通过设置vertical-align: middle解决问题，并给出相关文档地址。

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

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

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

发现效果并不好

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

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

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

各位可以试试 !!!

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

svg -> text文本水平、垂直居中。文本垂直对齐方式
baifu2766的博客
02-07 2397
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> svg{ ...
【HTML+CSS】文字和图片保持同一水平线的三种方式
weixin_38415876的博客
07-10 6365
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;
解决css图片和文字不在一条水平线上
oops
05-16 5731
css解决文字和图片对齐方式问题 通常情况下图片是默认顶部对齐，而文字则是默认底部对齐的，所以我们在布局时经常会遇到图片和文字不能对齐的问题。 解决方法很简单我们只需要给图片添加一条属性即可 img { width : 20px; vertical-align: middle; } vertical-align: text-top; //顶部对齐 vertical-align: middle; //居中对齐 vertical-align: text-bo
使用css将文字在水平线中显示
最新发布
m0_72929120的博客
01-23 788
【代码】使用css将文字在水平线中显示。
css 比较 在同一个水平线上
fangzilixia的专栏
06-29 1521
white-space：nowrap 不换行 display：inline-block 在同一个水平线 text-align：justify 文本两端对齐
【手把手教学】使用原生svg + css3去实现一个液态导航菜单
THINK & THANK
06-13 1031
有一段时间没有更新自己的博客了去玩gitpage了，后来觉着自己维护一个静态博客还是有着诸多不便。最终还是回到csdn写写一些文字。至于gitpage就留着作为一个展示自己写的静态项目的个人主页吧。 昨天在codepen里看到一个非常酷的导航菜单动画，研究了许多，写出这篇文章来分享一下这个动画的制作流程。 成品展示 别人的项目： https://codepen.io/lbebber...
svg 编码设置_如何手动编码SVG
Web design 教程小屋
07-10 2089
您将要创造的 关于可伸缩矢量图形的一大优点（除了它们可以无限伸缩而不造成质量损失外）是，一旦您了解了基本原理，就可以很容易地手工编写简单形状，而无需打开图形应用程序。 仅需几行代码，您就可以拥有自己的自定义图标，并且您将确切地知道每个图标是如何组合在一起的。 创建自己的SVG时，请确保以最有效的方式编写它们，并在站点中使用它们时具有最大程度的控制权。 在本教程中，我们将手工介绍编码S...
前端面试-CSS
wanglu458512的博客
09-19 3168
一、CSS基础 CSS选择器及其优先级 对于选择器的优先级： 标签选择器、伪元素选择器：1 类选择器、伪类选择器、属性选择器：10 id 选择器：100 内联样式：1000 注意事项： !important声明的样式的优先级最高； 如果优先级相同，则最后出现的样式生效； 继承得到的样式的优先级最低； 通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ； 样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用
html矢量动画,一步步教你用HTML5 SVG实现动画效果
weixin_39587246的博客
06-07 740
翻译：疯狂的技术宅本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章摘要SVG是一种基于 XML 的，用于定义缩放矢量图形的标记语言。 它允许你通过在2D平面中确定的一组点来绘制路径、曲线和形状。 此外你还可以通过在这些路径上添加动态属性(例如笔触，颜色，粗细，填充等)来生成动画。从2017年4月起，CSS Level 3 填充和描边模块 开始支持从外部样...
Canvas与SVG简介及实例
weixin_57999341的博客
12-23 737
默认情况下，Canvas 是一块 300px*150px 的矩形画布，用户可以自定义画布的大小或为画布添加其他属性。在同一画布中，即使我们添加再多的连线端点也只能有一条路径，如果想要开始新的路径就需要使用beginPath()方法，当出现beginPath()时即表示路径重新开始。上述代码定义了一个 id 为 canvas 的画布，并设置了画布的宽度为 400px，高度为 300px。上述代码获取了 id 为 canvas 的画布，同时将获取的画布对象保存在变量 canvas 中。
CSS——hr水平线样式
09-05
<hr/>水平线样式描述，为方便给水平线添加不同效果，面做是有要求，为大家推荐方法
html图标与文字对齐,html – 垂直对齐文本和SVG图标
weixin_35808305的博客
06-04 1013
我正在尝试将SVG图标与文本对齐.我已经阅读了很多关于如何使用它的信息来源,使用vertical-align：middle是它的最佳选择.我也能够做到,但有一个问题我想要答案.我见过的所有资源都告诉你只在img元素上放置vertical-align：middle.例如.但在我的特殊情况下,我需要在svg和span元素上放置vertical-align：middle.差异非常微妙.但它就在那里.这是...
css图标与文字对齐实现方法
weixin_33800463的博客
03-19 1590
1.移动端（安卓设备、ios设备）图标文字垂直居中对齐的最佳常用解决方案是采用弹性盒子布局，可以快捷有效实现子元素未知高度绝对垂直居中对齐。PC端考虑到兼容性的问题，一般不推荐使用弹性盒子，依旧只能采用传统方式（vertical-align: middle;或者position定位）实现图标文字对齐。 2. 实际上不管是line-height还是用position去定位，不管你display用...
Flex： flash聊天框 表情+文字 图文混排 （思路）
Winters_huang'Blog
05-15 2653
PS：具体实现代码
css设置checkbox和文字在同一水平线上
程序员张三
04-12 7296
默认是不在同一水平线上 需要在input上添加样式: vertical-align:middle; <input type="checkbox" style="vertical-align:middle;">文字
css一张图片和文字在同一水平线上显示市
shiki0083的笔记
04-16 8326
经常遇到一个问题，当需要让一张图片和文字在同一水平线上显示市，图片总是会比文字高出一截，可以说非常不好看了。 解决方法： HTML代码如下 <img src="../static/image/ok.png" /> <p class="tip1">密码修改成功，请重新登陆！</p> 1 2 CSS代码如下 p{ display: inline-bl...
css元素放在一行上
帅的博客
11-11 4710
使用flex弹性布局，可以将元素放在一行上。 用div将这一行的元素包裹起来， 然后div的样式如下: <style> .header { display:flex; align-items:center;/*垂直居中*/ justify-content: center;/*水平居中*/ } </sytle> 里层的元素，也可以用div包裹起来，然后设置百分比宽度style=“width: 60%” 这样多个元素就能放在同一行居中或者水平显示了。 ...
css元素水平放置
github_38186390的博客
07-12 1262
一。如果想让处在一级的元素水平放置。可以通过设置 display：inline-block 这个样式或者是 display: inline 。        例如：想让下面的水平放置，实现的效果如图： 这个就是通过对 设置 display：inline-block 效果形成的。如果设置成 display: inline。只会是在一排但是垂直方向上面不一致。所以一般想水平放置元素最好使用 dis
css控制图片与文字对齐
热门推荐
mozhan的专栏
08-25 1万+
<br />文字旁边搭配图片时，发现图片比文字靠上，原来默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐。<br />设置各对象的vertical-align属性，属性说明：<br />baseline－将支持valign特性的对象的内容与基线对齐<br />sub－垂直对齐文本的下标<br />super－垂直对齐文本的上标<br />top－将支持valign特性的对象的内容与对象顶端对齐<br />text-top－将支持valign特性的对象的文本与对象顶端对齐<br /
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

-嘻嘻哈哈~

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

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

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

打赏作者

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

抵扣说明：

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

余额充值