当前位置:首页 > 前端技术 > css实现图片和文字水平居中对齐

css实现图片和文字水平居中对齐

2022年09月17日 11:04:48前端技术10
  1.  
  2. 一、通过vertical-align:middle实现现图片与文字水平对齐,需要区分html是行内元素,还是块状元素;例如:标签img、span是行内元素;标签p是块状元素则需要将标签p通过diaplay:inline-block;转化为行内元素;

  3. 1、实现img、p及div水平居中对齐,则只需要在img的css中的vertical-align:middle;及将p和div(display:inline-block)转化为行内元素;

    css实现图片和文字水平居中对齐 _ JavaClub全栈架构师技术笔记

    css实现图片和文字水平居中对齐 _ JavaClub全栈架构师技术笔记

  4. 实现img、span水平居中对齐,由于这两者都是行内元素;则只需要在img的css中的vertical-align:middle;span标签什么都不需要添加;

    css实现图片和文字水平居中对齐 _ JavaClub全栈架构师技术笔记

    css实现图片和文字水平居中对齐 _ JavaClub全栈架构师技术笔记

  5. 二、通过flex布局实现图片与文字水平对齐

    只需要在父级元素中css添加:

    display:flex;

    flex-direction:row;

    align-items:center;

    子级元素则不需要像上面那样添加vertical-align:middle;

    css实现图片和文字水平居中对齐 _ JavaClub全栈架构师技术笔记

    css实现图片和文字水平居中对齐 _ JavaClub全栈架构师技术笔记

  6. 总结:vertical-align:middle 与flex布局处理图片与文字水平居中对齐的区别;前者只要针对标签比较少的,及css的内用是写在子级的;后者针对需要实现很多标签水平居中对齐比较方便,及css主要写在父级上;

作者:HPFBoy
来源链接:https://blog.csdn.net/HPFBoy/article/details/108745709

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42506.html

标签: css
分享给朋友:

“css实现图片和文字水平居中对齐” 的相关文章

HTML标签属性与CSS样式

HTML标签属性与CSS样式

HTML基础 定义:超文本标记语言 Hypetext Markup Language 特点: • 不需要编译,直接由浏览器执行 • 是一个文本文件 • 必须用htm或html作文件后缀 • 对大小写不敏感,HTML或html都可以 HT...

scrapy css选择器提取a标签内href属性值

 示例Html: <div class='abc'> <a href='https://blog.csdn.net/weixin_41767339'> Hello word! </a> </div&...

VSCode代码自动补全(html标签、style样式、css属性及值)

VSCode代码自动补全(html标签、style样式、css属性及值、),修改配置文件即可完成! 操作环境 1. 系统window 10 2. 软件VS code 2019汉化 1.按CTRL+SHIFT+P 2.输入搜索Su...

HTML-CSS标签属性注释大全

           ★文章有点长,但是我觉得你不用一次性看完,可以收藏一下,在自己的碎片时间里,可以随时拿出来看看。    ★今天把HTML里一些常用的标签也整理了一份,希望对于初学者有...

html标签属性大全(囊括CSS、CSS3、H5、XML等)

转载:https://www.w3school.com.cn/tags/tag_html.asp 作者:zhzhsgg 来源链接:https://blog.csdn.net/zhzhsgg/article/details/1130...

springmvc如何引入css等资源

   配置文件: <mvc:resources location="/WEB-INF/css/" mapping="/css/**" />     <mvc:resources location="...

CSS

CSS

文章目录 1. CSS 的概念 2. CSS 的作用 3. CSS 与 HTML 的结合方式 4. CSS 格式 5. 选择器 5.1 选择器的作用...

css一个标签添加多个class的样式顺序问题

css一个标签添加多个class的样式顺序问题

在使用jquery给div元素添加class时发现一个问题。就是后添加的class中的式样没有覆盖掉原来的class中的式样。 相关css如下: /*div标签原有样式*/ .nav>.navlogin, .navregist {...

CSS将img图片填满父容器div,自适应容器大小

当一个页面中引入多张图片时候,会碰到图片尺寸不一致,单要求显示成一致的大小,我们直接设置图片尺寸会导致图片变形,这就是我们遇到的问题,看下解决方法: <div> <img src="引入的图片地址" alt=""> </div&...

css中*的用法

*是代表所有html中的标签 例.写了一个 *{box-sizing:border-box} .span-class{ width:80px; padding:20px; } 结果,span标签的内容宽度是80px,并不是40px...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。