vertical-align | 易学教程

学习02-css（图片垂直对齐，去除图片底部空白缝隙，溢出文字用省略号显示，css三角之美，字体图标）

阅读更多关于学习02-css（图片垂直对齐，去除图片底部空白缝隙，溢出文字用省略号显示，css三角之美，字体图标）

图片垂直对齐基线对齐 vertical-align： baseline；默认的是文字和图片基线对齐垂直居中 vertical-align： middle；默认的是文字和图片基线对齐顶部对齐 vertical-align： top；默认的是文字和图片基线对齐去除图片底部空白缝隙 img vertical-align: middle |top | bottom 让图片不要基线对齐 display： block：转换为块级元素溢出文字用省略号显示 white-space:normal; //当文字显示不开的时候，自动换行 white-space:nowrap; //强制在同一行显示文本，直到文本遇到br才换行 overflow:hidden; //超出的部分隐藏 text-overflow:ellipsis; //文字用省略号替代超出的文本 css三角之美 width: 0; height: 0; border-style: solid; border-width: 10px; border-color: transparent transparent transparent red; font-size:0pt; color:#454545; line-height: 0; 1.宽度高度为0 2.4个边框都要写颜色，其余改为透明色transparent 3

【css】单选框和复选框文字垂直居中问题

阅读更多关于【css】单选框和复选框文字垂直居中问题

现在的网站一般字体大小都是 12px，在 12px 下单选框和复选框文字垂直居中对不齐，不过要是字体大小是 14px 的话却完全没有这个问题。下面我整理了下解决方法，总共有 6 种。 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>css-checkbox-radio-vertical-align</title> <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/> <style type="text/css"> body{font:12px SimSun;} p{margin:30px 10px;} .wrapper{margin:50px auto;width:500px;} .input1{vertical-align:text-bottom; margin-bottom:-1px; *margin-bottom:-4px;} .input2{height:13px; vertical-align:text-top; margin-top:0;} .input3{height:15px; vertical-align:bottom; margin-bottom:-1px; margin

H5：消除div里面img的缝隙

阅读更多关于 H5：消除div里面img的缝隙

当我们将img标签放于div中，仔细查看会发现img底部和div底部有一道很小的缝隙。那么如何解决这个问题呢？三种方式： 1、定义容器里的字体大小为0 2、图片img标签display:block 3、定义图片img标签vertical-align:bottom或vertical-align:middle或vertical-align:top 原因：图片文字等行内元素默认是和父级元素对齐方式为baseline，而baseline和父级底边有一定距离。这个距离和 font-size，font-family 相关。所以，处理方式就三种思路，按块级元素处理（方式2），对齐方式不为baseline（方式3），距离设为0（方式1）。其实不只div，其他的block元素中包含img也会有这个现象，处理方式思路同上。　　来源： CSDN 作者： KWMax 链接： https://blog.csdn.net/yaojie5519/article/details/104431500

未知高度的图片垂直居中

阅读更多关于未知高度的图片垂直居中

图片的宽度和高度是未知的，没有固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中。最近的在做的项目就有这个需求，所以先把一些常用的方法都收集整理了一下。下图是理想中的效果图，外部容器的宽度和高度固定，中间的图片宽度和高度未知，但是图片要始终要相对于外部的容器垂直居中。但是实际在浏览器中实现起来的效果并不是很完美，由于各浏览器的解析都各不相同，所以在各浏览器都会有1px-3px的偏差。方法一：该方法是将外部容器的显示模式设置成display:table，img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样就可以很方便的使用vertical-align象表格元素那样对齐了，当然这只是在标准浏览器下，IE6/IE7还得使用定位。 HTML结构部分： <div id="box"><span><img src="images/demo.jpg" alt="" /></span></div> CSS样式部分： <style type="text/css">#box{ width:500px;height:400px; display:table; text-align:center; border:1px solid #d3d3d3;background:#fff;}#box span{ display

两个相邻的行内块其中一个设置外边距另一个也受影响的原因和解决办法

阅读更多关于两个相邻的行内块其中一个设置外边距另一个也受影响的原因和解决办法

一个盒子里有两个行内块，其中一个设置了margin，另一个不设置，也会下沉，而且更低；如图：第二个也有上边距，出现该问题的本质原因是：内联元素的默认垂直对齐方式是和基线对齐，并不是和底部对齐。即默认vertical-align：baseline。解决办法： 1.修改父级元素行高：line-height:0； 2.修改父级元素字体尺寸：font-size:0;　 3.修改内联元素对齐属性：vertical-align：xxx; vertical-align可能的值值描述 baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。 bottom 把元素的顶端与行中最低的元素的顶端对齐。 text-bottom 把元素的底端与父元素字体的底端对齐。 length % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 inherit 规定应该从父元素继承 vertical-align 属性的值。这里我用的是vertical-align：top; 而横向间隙的问题原因是行内块标签之间的换行带来的影响；解决办法： HTML中标签不换行，父元素设置：font

css实现高度垂直居中

阅读更多关于 css实现高度垂直居中

1：单行文字垂直居中：如果一个容器中只有一行文字的话，定义height(高度)和 line-height(行高)相等即可。　　如：<div style="height:25px;line-height:25px;overflow:hidden">aa</div> 2：多行文本固定高度垂直居中：核心：display:table 和display:table-cell ;vertical-align:middle; 兼容：ie7+ 1 <div class="wrapper"> 2 <div class="content">content age</div> 3 </div> 相对应的css代码如下： .wrapper{ height:400px; display:table; } .content{ vertical-align:middle; display:table-cell; border:1pxsolid#FF0099; background-color:#FFCCFF; width:760px; } 核心：display:table 和display:table-cell ;vertical-align:middle; 以及使用绝对定位兼容：ie6+ <div class="wrap"> <div class="subwrap"> <div class=

悬浮框，中间文字两边横线

阅读更多关于悬浮框，中间文字两边横线

wxml wxss 悬浮框 .mask { width: 100%; height: 100%; position: absolute; background-color: #999; z-index: 9999; top: 0; left: 0; opacity: 0.5; } 中间文字两边横线 .tip_text { height: 64rpx; line-height: 44rpx; font-size: 32rpx; text-align: center; margin-top: 20rpx; } .tip_text .line { display: inline-block; width: 200rpx; border: 1rpx solid lightgrey; } .tip_text .txt { color: black; vertical-align: middle; vertical-align: -20%; margin: 0 20px; } 来源： CSDN 作者：谈蕾蕾链接： https://blog.csdn.net/weixin_43828196/article/details/103952859

实现div里的img图片水平垂直居中

阅读更多关于实现div里的img图片水平垂直居中

body结构 <body> <div> <img src="1.jpg" alt="haha"> </div> </body> 方法一：但是如果有flex布局，会影响vertical-align:middle失效将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。 <style type="text/css"> *{margin: 0;padding: 0;} div{ width:150px; height: 100px; display: table-cell; vertical-align: middle; text-align: center; border:1px solid #000; } img { width: 50px; height: 50px; } </style> 结果如下图所示：方法二：通过position定位来实现。将div设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%，此时图片的左上角位于div的中心，要是图片的中心位于div的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半。 <style type="text/css"> *{margin: 0;padding:0;}

img与容器下边界的空隙（缝隙）的解决方法

阅读更多关于 img与容器下边界的空隙（缝隙）的解决方法

问题描述： IE7下 img与div（block类型元素）下边界有距离（或者叫缝隙、空隙）。 IE7才会有这个问题，IE8下是没有的。解决方案：法宝一：定义图片img标签vertical-align:bottom，vertical-align:middle，vertical-align:top。 img{vertical-align:bottom;} 法宝二：定义容器里的字体大小为0。div { width:110px; border:1px solid #000000; font-size:0 } 据说原因：图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离（这个距离和 font-size，font-family 相关），所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li，其他的block元素中包含img也会有这个现象。来源： https://www.cnblogs.com/cinderlla/p/3909542.html

img与容器下边界的空隙（缝隙）

阅读更多关于 img与容器下边界的空隙（缝隙）

问题描述： IE7下 img与div（block类型元素）下边界有距离（或者叫缝隙、空隙）。 IE7才会有这个问题，IE8下是没有的。解决方案：法宝一：定义图片img标签vertical-align:bottom，vertical-align:middle，vertical-align:top。 img{vertical-align:bottom;} 法宝二：定义容器里的字体大小为0。 div { width:110px; border:1px solid #000000; font-size:0 } 据说原因：图片文字等inline元素默认是和父级元素的baseline对齐的，而baseline又和父级底边有一定距离（这个距离和 font-size，font-family 相关），所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现。而且不光li，其他的block元素中包含img也会有这个现象。来源： https://www.cnblogs.com/sgy2008/archive/2009/11/12/1601577.html

订阅 vertical-align