css行内块元素垂直居中

div里边有个img标签，要想让img垂直居中，需要

给父盒子设置line-height=height
img设置vertical-align:middle

<div style="background-color: red; height: 150px;line-height: 150px;"><img src="data:images/close.png" style="vertical-align: middle;" alt="">
</div>

原理

基本知识点：
行内块元素一般是和文字在一行内显示（这类型标签产生的初衷），行内块元素默认是和同一行的文字基线对齐的。
这个可以给行内块元素加几个文字来看验证

<div style="background-color: red; height: 150px;line-height: 150px;"><button style="background-color: #fff;height:50px;width:50px;vertical-align: middle;"></button>wenzi</div>

那此时有同学会问，如果行内元素一行内没有文字呢，这时候怎么对齐？
答案是：即使行内元素同一行没有文字，浏览器也会给一个隐形的文字，这个是理解的难点

所以父元素添加line-height,调整中线位置，然后子元素再设置和中线对齐，就可以实现行内块元素垂直居中。

css行内块元素垂直居中相关推荐

六、pink老师学习笔记——CSS三角形之美 margin负值之美文字围绕浮动元素行内块元素布局的巧妙运用
7. 拓展@ 7.1 margin负值之美 1). 负边距+定位:水平垂直居中咱们前面讲过, 一个绝对定位的盒子, 利用父级盒子的 50%, 然后往左(上) 走自己宽度的一半 ,可以实现盒子水 ...
css标签显示特性（块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例）
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
浮动元素具有行内块元素特点（HTML、CSS）
浮动元素具有行内块元素特点(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta c ...
行内块元素（HTML、CSS）
行内块元素(HTML.CSS) 行内块元素实际就是把块元素以行的形式展现,保留了块元素可以设置的对应CSS属性. <!DOCTYPE html> <html lang="e ...
css怎么将块元素变成,CSS块元素、行内元素、行内块元素的转换
一.块元素转行内元素:display:inline 二.行内元素转块元素:display:block div{ display: inline; /*无效 width: 500px; height: ...
CSS中块级元素，行内块元素，行内元素的特点
CSS自学笔记目录一.什么是元素显示模式二.CSS的元素显示模式 1.块元素 2.行内元素 3.行内块元素前言网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我 ...
【CSS】图片底部空白缝隙处理 ( 使用居中对齐 / 顶部对齐 / 底部对齐 | 将行内元素 / 行内块元素转为块级元素 )
文章目录一.图片底部空白缝隙问题二.图片底部空白缝隙问题解决方案一 ( 使用居中对齐 / 顶部对齐 / 底部对齐 ) 三.图片底部空白缝隙问题解决方案二 ( 将行内元素 / 行内块元素转为块级元素 ...
Web前端，CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性、普通导航和五彩导航的制作
前言持续总结输出中,今天分享的是Web前端,CSS中关于块级元素.行内元素.行内块元素.元素显示模式转换.CSS特性继承性和层叠性 1.块级元素特点: 独占一行(一行只能显示一个) 宽度默认是父元 ...
css中标签显示模式、块元素、行内元素、行内块元素、显示模式转换
标签显示模式display: HTML标签一般分为块标签(块元素:block-level)和行内标签(行内元素:inline-level)两种类型,但是还有第三种说法行内块元素:table-row-g ...

css行内块元素垂直居中

css行内块元素垂直居中

原理

css行内块元素垂直居中相关推荐

最新文章

热门文章