vertical-align的兼容性问题

最新推荐文章于 2024-03-11 20:25:07 发布
最新推荐文章于 2024-03-11 20:25:07 发布
阅读量3.9k 收藏 2
点赞数
分类专栏： html css vertical-align 文章标签： html css vertical-align
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/muzi187/article/details/79158772
版权
html 同时被 3 个专栏收录
43 篇文章 0 订阅
订阅专栏
css
15 篇文章 0 订阅
订阅专栏
vertical-align
2 篇文章 0 订阅
订阅专栏

慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之vertical-align-->第八章vertical-align糟糕的兼容性

IE6/IE7

IE8/Chrome/FireFox/...

1、Baseline

（1）小图片和文字

（2）大图片和文字


（3）大行高下的大图片和文字

2、Middle

（1）小图片和文字

（2）大图片和文字

（3）大行高下的大图片和文字

3、text-bottom（文本对齐类）

（1）小图片和文字

 

（2）大图片和文字

 

（3）大行高下的大图片和文字

IE7兼容性问题：IE7下图文一体了，middle的解释有问题。Inline-block可以打破图文一体。

解决一体化，baseline、text-top、text-bottom就能放心使用了。

muzi187
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS属性探秘系列(四)：vertical-align
01-21
一、前言vertical-align对于初学者最常见的使用是在表格中了，尤其是使用dreamweaver的童学，常见的数top,middle,bottom了,其他的应该很少用到，但是vertical-align的属性之多，所以情况也略显复杂，下面先来看看百度及Google常见问题：1.vertical-align的含义是什么？2.vertical-align图片和文字对齐兼容性问题？3.vertical-align属性值各浏览器兼容性？4.vertical-align如何实现图片的垂直居中？5.vertical-aling如何实现input[type=’checkbox’],input[typ
我对CSS vertical-align的一些理解与认识（一）
jiangxindu1的专栏
11-26 1284
我对CSS vertical-align的一些理解与认识（一） by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=813 一、关于今天，本文，及其他 今天是个特殊的日子，因为今天是汶川地震两周年的日子，我很悲鸣；今天又是国际护士节，看到微博上护士照横流，我
Css基础——vertical-align属性
最新发布
qq_38965505的博客
03-11 929
CSS 的 vertical-align 属性使用场景： 经常用于设置图片或者表单(行内块元素）和文字垂直对齐。官方解释： 用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。行内块元素适用vertical-align属性，图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。此时可以给图片、表单这些行内块元素的 vertical-align 属性设置为 middle 就可以让文字和图片垂直 居中对齐了。
我对CSS vertical-align的一些理解与认识（二）
tian361zyc的博客
08-02 515
css
CSS深入理解之vertical-align
literarygirl的博客
02-13 1133
一、了解vertical-align支持的属性值以及组成 vertical-align的各类属性值 vertical-align的属性值可以归为以下4类： 线类，如 baseline(默认值)、top、middle、bottom； 文本类，如 text-top、text-bottom； 上标下标类，如 sub、super； 数值百分比类，如 10px、1em、5%； 数值百分比类：其实属于两大类，数值类和百分比类。合在一起是因为它们有很多共性，都带数字；都支持负值；行为表现一致（在baseline对齐基
css 定位兼容性,CSS基础：定位与浏览器兼容性
weixin_30302513的博客
08-03 640
position属性介绍： CSS position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。position 属性值static介绍： 该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。此时 top, right, bottom, left 和 z-index 属性无效。.box {position...
IE8中实现垂直居中(兼容IE6、IE7、IE8，Firefox，Chrome等)
06-27 1万+
投票情况统计:
div css横向菜单样式代码 ie8,css实现div水平、垂直居中兼容chrome、ie8
weixin_39845241的博客
08-03 237
示例1 chrome33、ie8测试通过：复制代码代码如下:/* 固定宽高div，在浏览器中保持水平、垂直居中 */#div1 {width:400px; height:300px;position:absolute;left:50%; top:50%;margin-left:-200px; margin-top:-150px;background:#f90;}示例2 chrome33、ie8测试...
CSS实现文字竖排显示（兼容IE6/IE7）
weixin_33883178的博客
04-08 547
平时我们常使文字横排显示，那么如何用CSS实现文字竖排显示呢？以下是代码实例。 <p class="time">2018年4月4日15:17</p> .time{ width: 16px; line-height: 16px; font-size: 16px; color: red; } 可以看到在浏览器里如图所示...
关于 vertical-align使用中遇到的一些坑！
qq_39209556的博客
12-27 709
1.首先，使用的先前条件是元素为行内元素。如果不是，display：inline/inline-block就要登场啦。 2.使用了浮动之后，， 有些同学就会想到用 vertical-align:middle可以对齐，其实是无效的，因为浮动之后元素脱离了dom流。 ...
vertical-align详细介绍
shi15926lei的博客
07-11 4339
该属性可以接受多个值，包括关键字（如top、middle、bottom），长度单位（如像素、百分比）或百分比值的关键字（如baseline、sub、super）。是一个CSS属性，用于指定行内元素或表格单元格中内容的垂直对齐方式。它可以应用于行内元素、表格单元格或表格单元格中的内容。属性也可以接受长度单位（如像素）或百分比值。这些值用于指定元素相对于行框的偏移量。如果要垂直对齐块级元素，可以使用其他技术，如Flexbox或Grid布局。标签的行内元素将垂直居中对齐，而表格单元格中的内容将顶部对齐。
CSS 多浏览器兼容性问题及解决方案
12-11
Javascript 多浏览器兼容性问题及解决方案 兼容性处理要点 1、DOCTYPE 影响 CSS 处理 2、FF: 设置 padding 后， div 会增加 height 和 width， 但 IE 不会， 故需要用 !important 多设一个 height 和 width 3、FF:...
CSS 浏览器兼容问题整理大全(比较全)
09-27
从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且... CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:20
比较全的CSS浏览器兼容问题整理总结
11-30
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并 整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS ...
CSS深入理解之line-height
热门推荐
muzi187的博客
01-26 1万+
慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之line-height line-height 一、line-height的定义 行高line-height，两行文字基线之间的距离。 1、什么是基线？字符（x）下边缘 2、为什么是基线？基线是*线定义之根本。 3、需要两行么？不需要，两行的定义决定了一行的表现 行高line-height可以让单行文本垂直
js实现-商城分类导航效果
muzi187的博客
05-17 1万+
window.onload=function(){ var Lis=document.getElementsByTagName("li"); for(i=0;i<Lis.length;i++){ Lis[i].i = i; Lis[i].onmouseover=function(){ this.className="lihover"; var h0 = (this.i
根据经纬度在地图上定位
muzi187的博客
11-10 8173
GPS经纬度坐标偏移问题。这个是由于中国要求对经纬度进行加密导致的，所以百度和Google的地图上都存在这个问题，即使用手持设备或者导航设备获取到的经纬度在地图上定位发现并不是对应的位置，而存在很大的偏移。 无偏移精准定位 *{margin:0px;padding:0px;} html, body {height: 100%;} body, button, i
将画布转化成图片：canvas-->img
muzi187的博客
11-03 7778
1、html 2、canvas是已处理好的画布，转化成png图片即可 var cimg = function() { var imgSrc = document.getElementById("canvasId").toDataURL("image/png"); document.getElementById("imgId").src = imgSrc; }
CSS深入理解之absolute
muzi187的博客
01-11 5185
慕课学习-->前端开发-->HTML/CSS-->CSS深入理解之absolute absolute 一、absolute与float 鲜为人知的兄弟关系，相同的特性表现： 包裹性 absolute的包裹性 .box { padding: 10px; background-color: #f0f0f0; } input { positio
text-align和vertical-align的区别
05-22
`text-align` 和 `vertical-align` 都是 CSS 中用于控制元素对齐方式的属性，但它们作用的方向不同。 - `text-align`：用于水平对齐文本。可以用于块级元素、行内块元素和表格元素。常见的属性值有 `left`、`center...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值