一、单行文本垂直居中对齐方法
height:20px;
line-height:20px;
overflow:hidden;
注意:overflow:hidden不可省略,以上数字自定义,此法不适应图片
二、多行文本在未知容器内垂直居中对齐方法
padding-top:10px; padding-bottom:10px;
注意:以上数字自定义,此法不适应图片
三、多行文本在已知容器内垂直居中对齐方法
.valign{
border:2px #666 solid;
height:560px;
display:table-cell;
vertical-align:middle;
}
.edge{
display:inline;
width:0;
height:100%;
zoom:1;
vertical-align:middle;
}
.container{
display:inline;
width:100%;
zoom:1;
vertical-align:middle;
}
<div class="valign">
<div class="edge"></div>
<div class="container"> 你需要的多行文本内容 </div>
</div>
注意:以上容器高度自定义,此法同样适应于图片,但添加了额外的空标签
在固定宽高的容器里,要实现单行文字垂直居中,多行文字也做到垂直居中,方法是有的(没有做不到,只有想不到),这句话再次证实是正确的。
<div class="valign">
<span>未知图片在固定容器里垂直水平居中方法未知图片在固定容器里垂直水平居中方法</span>
</div>
.valign{
width:160px;
height:114px;
border:1px solid #ccc;
display:table-cell;
text-align:center;
_font-size:100px;/*高度与字体大小比例是:1.14*/
vertical-align:middle;
}
.valign span{vertical-align:middle;font-size:12px;}
此法原理其实跟方法五未知图片在固定容器里垂直水平居中方法一样,将未知行数的文字display:inline-block当做图片来用。
注意:外层valign不适合浮动;高度与字体大小比例是:1.14
更新与(2010.12.2)
四、固定高度图片在未知容器里垂直居中对齐方法
img{
position:absolute;
top:50%;
margin-top:-10px;
}
<img src="url" height="20"/>
注意:margin-top的负值是图片高度的一半。
五、未知图片在固定容器里垂直水平居中方法
#wrap{
width:180px;
height:200px;
border:1px solid #ccc;
/*水平居中*/
text-align:center;
/*非IE浏览器下垂直居中*/
vertical-align:middle;
display:table-cell;
/* IE浏览器下垂直居中*/
*font-size:175; /*约为高度的0.873,200*0.873 约为175*/
*font-family:Arial; /*防止非utf-8引起的hack失效问题,如gbk编码*/ *display:block;
}
#wrap img{vertical-align:middle;}
注意:这里会出现一个问题,当wrap向左浮动时,除了IE6与IE7,其它浏览器不能实现垂直居中,可以通过设置与wrap一样高的行高,即line-height:200px;FF下实行了,但其它浏览器下仍不能实现。由此方法五引发的问题,可以不设置wrap浮动,而是在其外定义一个向左浮动的空盒子。见附件dome1.html文件
对于出现多佘的空标签总会让人感到结构不够干净,由方法五引发了如下解决方案
.wrap{
width:160px;
height:200px;
border:1px solid #ccc;
line-height:200px;
text-align:center;
font-size:12px;
_font-size:175px;/*约为高度的0.873,200*0.873 约为175*/}
.wrap img{ vertical-align:middle; }
此法见dome2.html,既使浮动也能实现垂直居中的效果 dome3.html
效果图
最近会作一些关于CSS的总结,希望这篇文章能对读者您有点帮助 ,如果有高深的见解,欢迎一起探讨。
知识需要更新更需要总结,细节决定成败!
分享到:
相关推荐
利用vertical-align:middle进行垂直方向上的居中对齐,此方法需要满足的条件: 设置父元素的行高line-height等于父元素height的高度 子元素必须是行内块级元素display:inline-block; 子元素设置vertical-align:...
CSS 居中对齐 代码中均省略了浏览器前缀 以下例子以我的个人的标准排序 当然也有更多的居中处理方法 但我觉得只有这5种方法是最完善的解决方案 flex 居中 优点:可对未知高度进行居中处理 <style> .wrap{...
button中文字垂直居中,要设置高和行高,行高要小于高。 对input标记设定样式,代码如下: //HTML 代码 复制代码代码如下: <form> <input type=”text” name=”textfield” id=”textfield” /> <...
flex布局有啥用呢,最大的作用便是快速实现你所需要的布局(水平居中、垂直居中、左右对齐等) flex布局的使用非常简单,在这我将几个常用的场景,其他更深入的可以去查资料了解(我才不会说是因为我懒) 首先是对...
“文本”样式 uicontrol 与“顶部”垂直对齐,这与“编辑”样式 uicontrol 不同,后者与“中间”对齐(从 R2013a 开始)。 但是,Matlab 不会为 uicontrol 对象公开 uicontrol 的... 如果有人有解决方案,请发表评论!
当你“指出问题,你就能找出解决方案”。所以“只要你有意为之,有时完全可以任意地打破常规”。 后半部分是颜色、字体和综合应用技巧,或许因为文化的差异和专业性的问题,让它们看起来有点像鸡肋,其实如果你仔细...
macji的跨浏览器实现:float:center可以解决居中问题。但,固定宽度的UL,内部固定宽度的N个LI的浮动,LI与LI的间距,UL和第一个及最后一个LI的间距。我脑残了!很可能是我真的SB了!看这个地址的方法:...
公认的解决方案必须是响应友好的。 负保证金 -没有React 绝对位置 -没有兄弟姐妹的概念 固定位置 - 没有兄弟姐妹的概念 表 - 没有React - 绝对定位儿童的问题 -小区间间距的问题 - 单元格溢出问题 浮动 - 仅水平 - ...
由于编码复杂性,“问题”和“解决方案”未遵循通用网格。 我还在居中对齐h1,在我知道它之前,我有四个不同的网格。 不太理想。 除了我故意打破网格时的引号外,新的只有两个。 算他们。 :) 颜色。 这是一个很大的...
实际的开发中,表现层的解决方案虽然有多样,但是IE浏览器已成为最多人使用的浏览器,因为大家都用Windows。在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统、银行系统)。或者是...
实例004 根据需要创建所需解决方案 6 1.2 Visual Studio开发环境的使用 8 实例005 为程序设置版本和帮助信息 8 实例006 设置Windows应用程序启动窗体 9 实例007 统一窗体中控件的字体设置 10 实例008 通过“格式”...
易语言5.1 相对于易语言5.0更新说明: ... 修改XML解析支持库,增加写出CDATA数据功能,解决解析XML时错误的丢弃换行和TAB字符的BUG,解决读取节点值时对CDATA数据进行转义处理的BUG。 20. 修改扩展界面支持库...
行数=图像垂直像素/(字符高+行间距) 字符高=10; --box x=[x] y=[y] w=[w] h=[h] l=[l] 项目标题起始列,起始行,每行最大字符数,最大菜单项数,菜单框线条宽度(像素); 注:w=0 表示水平居中。此时 w 应当在 ...