IE6下使用line-height时候, 全文字会垂直居中对齐的, 如果当文字遇到图片, 文本框, 下拉框等其他元素时候在ie6下就会失效, 很多人一般用padding的方法来解决的。 这里说下另种方法。
先看下效果:点击阅览IE6下line-height 失效的解决办法
点击预览页面,可以查看源文件。里面也有详细说明。 以下是解决 IE6下line-height 失效的解决办法 主要代码。
<style type="text/css">
.aa{ height:100px; width:300px; line-height:100px; background-color:#099;}
/*
这里 假设 input 高度等于 20
margin: (所属line-height-自身高度)/2px 0;
就等于 margin:(100-20)/2px 0 = margin:40px 0;
大致效果是有了, 肯定还是有点小偏差,input高度是我假设20的。
*/
.aa input{ margin:40px 0; vertical-align:middle; }
</style>
<div class="aa">居中对齐 <input name="" type="text" /></div>
分享到:
相关推荐
line-height全面解析line-height全面解析li
tinyMCE 富文本编辑器 line-height 行高插件。 tinyMCE富文本编辑器line-height行高插件,下载后放在tinyMCE插件的plugins文件夹中,之后初始化中引入plugins,即可在toolbar中展示 tinyMCE line-height 行高插件
tinyMCE富文本编辑器line-height行高插件,下载后放在tinyMCE插件的plugins文件夹中,之后初始化中引入plugins,即可在toolbar中展示
但当行中有其他元素时(如图片,SPAN,li..)在IE6.0下line-height会不起效果,后来查了下资料,果然如此,资料如下: 当在一个容器里文字和img、input、textarea、select、object等元素相连的时候,对这个容器设置...
关于css中line-height(行高)设置无效的问题 我们先写下这一串代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style ...
ckeditor5-line-height-plugin CKEditor5的创建插件,用于更改所选块的行高。 开始使用 首先,从npm安装构建: npm install --save ckeditor5-line-height-plugin 或使用纱线: yarn add ckeditor5-line-height-...
复制代码代码如下:line-height:22px.jb51div{line-height:22px}line-height:200%.jb51div{line-height:200%} line-height:+数字+单位(在CSS布局中我们一般采用像素px为单位)行高line-height的值可以为百分比数字 |...
line-height:行高 设置文字间上下距离 height:高度 就是定义一个层 或某样东西的高度啦 也就是说line-height是特指单行高度,height可以为所有元素的高度 文字放大后边缘会重叠? line-height直白理解就是文字...
前言在CSS中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了,比如下面的例子: 复制代码代码如下:<!DOCTYPE ...
偶然看到的一篇介绍line-height的文章,图文并茂很详细也很透彻,转过来学习。 什么是行间距? 古时候我们使用印刷机来出来文字。印刷出来的每个字,都位于独立的一个块中。 行间距,即传说中控制两行文字垂直距离...
现在越来越多的移动界面使用rem适配,遇到的坑也不尽其数,今天就移动端android上line-height不居中的问题提出自己的解决办法。 据分析得知原因: 1.字体大小不要使用奇数字号,带小数点的更不要提了。也就是说...
tinyMCE 富文本编辑器 line-height 行高插件。 tinyMCE富文本编辑器line-height行高插件,下载后放在tinyMCE插件的plugins文件夹中,之后初始化中引入plugins,即可在toolbar中展示 tinyMCE line-height 行高插件
line-height使文本居中的3像素bug,先查下这3px的底细,怎么查?观察 FW先写个height、line-height都为30px,背景为红色的元素,设置文字为12px。然后量下,果然有3px的bug。同时增加或者减少height、line-height 1...
2.line-height指的是在DIV中的元素上下居中 比如用在里,则可以将line-height的高度和height的值相等,(height:30px; line-height:30px;)这样可以让文字在内相对于30px垂直居中。比如用在内,像这样成段落的,如果...
先说下为什么line-height等于元素高度文字却没有垂直居中,其实line-height等于元素高度的时候文本并不是真的居中了,而是看着居中了,当元素高度和font-size差距较大的时候,这种不是真正的居中就越发的明显,这里...
美工之路系列视频是为那些想从事网页前台设计的设计师们和网页设计...下面对新教程作一个简单的介绍: 本教程包含4个部分:HTML篇,CSS篇,Javascript篇和XML篇,教程会陆续发布,在时间跨度上有点大,希望大家谅解。
text-align,vertical-align,line-height居中布局笔记