如何让一个图片和一个文字框居中对齐（如何让两个行内元素居中对齐）

这种对齐方式有两种情况
图片和文字框中都是居中的，这样看起来也是一种对齐情况，如图所示

解决办法：
文字框设置line-height，然后图片的高度height=文字框line-height，再给图片设置
vertical-align=top，（有时候也会借助margin-top）这样图片相对外框向上，但是视觉上相对文字框居中。

//html<span class="brand"></span><span class="name">{{seller.name}}</span>

//stylus.branddisplay inline-blockvertical-align topwidth 30pxheight 18pxbackground-image url("brand.png")background-size 30px 18pxbackground-repeat no-repeat.namemargin-left 6pxfont-size 16pxline-height 18pxfont-weight bold

注：图画框一定要有display inline-block属性，不然无法给图片设置宽和高。

如何让一个图片和一个文字框居中对齐（如何让两个行内元素居中对齐）相关推荐

各种css文字样式效果——多个行内元素居中，三点，缩进，阴影等
前端基础知识--css样式学习一.文字效果 1. 文本垂直水平居中.(一行和多行) 2. 文本超出显示省略值... 3. 文本换行 4. 文本缩进 5. 文本两端对齐 6. 字体阴影效果一.文字效 ...
html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素
目录概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天, ...
前端：HTML/02/排版标记，块元素，行内元素，html字符实体，列表标记，图片标记
html排版标记 <p></p> :表示一个段落常用属性:align :水平对齐方式,取值:left(左),center(居中),right(右) 换行标记<br> ...
css标签显示特性（块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例）
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
【CSS】图片底部空白缝隙处理 ( 使用居中对齐 / 顶部对齐 / 底部对齐 | 将行内元素 / 行内块元素转为块级元素 )
文章目录一.图片底部空白缝隙问题二.图片底部空白缝隙问题解决方案一 ( 使用居中对齐 / 顶部对齐 / 底部对齐 ) 三.图片底部空白缝隙问题解决方案二 ( 将行内元素 / 行内块元素转为块级元素 ...
行内元素中去掉文字的上下间距，使得文字所在元素的高度同字体高度一致的方法...
之前在p这类块元素中的文字,给line-hight=1;就可以去掉文字自带的上下间距, 像这样: 最近突然发现这个方法在行内块和块元素上好使,可当用在span或者a这类内联元素上都不好使,除了转为块元 ...
WEB前端 - 如何实现在图片上盖章的效果，类似合同上的印章盖章效果（一个图片，一个印章图片，合并到一起且印章半透明形成盖章效果）最牛解决方案，适用于任何前端项目！
效果图这种需求很少,网上基本上没有相关教程. 假设你现在有一个图片(做背景),和一个印章图片,如下图所示: 最后的效果可以用下图 "形容": 示例源码提供一个详细示例,您可以复 ...
pandas数据框，统计某列或者某行数据元素的个数
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/sinat_38893241/artic ...
html一个图片链接四个,HTML图片怎么超链接
0 回答 2021-05-06 浏览:9 分类:其他问题 1 回答 2021-05-06 浏览:9 分类:其他问题回答: 2 回答 2021-05-06 浏览:2 分类:其他问题回答:超链接的代码 ...

如何让一个图片和一个文字框居中对齐（如何让两个行内元素居中对齐）

如何让一个图片和一个文字框居中对齐（如何让两个行内元素居中对齐）相关推荐

最新文章

热门文章