分享单行图片文字垂直居中问题小技巧
2007-04-06 11:45
309 查看
总结选自(CSS权威指南)
引用内容
vertical-align
初始值: baseline(缺省值)
可否继承:否
适用于: 内联元素
说明:vertical-align:baseline使元素的基线同父元素的基线对齐.
警告:vertical-align不能影响表格单元中的内容的对齐,对于块元素中的内容也一样.
文字不多,但时常有人范错误,有人说我用了为什么没有效果呢?首行看一下他的代码.
程序代码
.style{vertical-align:middle;.....}
HTML:<div class="style"><img src="地址" />...<div>
分析:从上面的代码可以看出错误就是把样式应用在块元素中了
我们只需要改样式为
程序代码
.style img{vertical-align:middle;.....}
如果STYLE中有其它如INPUT或其它内联元素可写成
程序代码
.style img,.style.input{vertical-align:middle;.....}
或.style *{vertical-align:middle;.....}/*在不影响其它元素的情况下使用这个通配符*/
以上是在没有设置高度/行高的事情下,如果加入了高度和行高的事情下FF可以支持,IE6以下则不完全支持,看以下测试结果.(为了增加明显的效果对图片适当增加了高度)
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单行图文并排垂直居中</title>
<style type="text/css">
.text{
margin:5px 0 15px 0}
}
.mid{
line-height:50px;
background-color:#CCCCCC;
}
.mid3{
height:50px;
background-color:#CCCCCC;
}
.mid2{
line-height:50px;
height:50px;
background-color:#CCCCCC;
}
.va_m img{
vertical-align:middle;
}
</style>
</head>
<body>
<div style="background-color:#CCCCCC;">无样式和图片</div>
<div class="text">说明:</div>
<div style="background-color:#CCCCCC;">无样式有图片<img src="//www.purecss.cn/images/level3.gif" width="37" height="40"/></div>
<div class="text">说明:</div>
<div class="mid3">只有height</div>
<div class="text">说明:</div>
<div class="mid3">有height有图片<span style="background-color:#CCCCCC;"><img src="//www.purecss.cn/images/level3.gif" width="37" height="46"/></span></div>
<div class="text">说明:</div>
<div class="mid">只有line-height</div>
<div class="text">说明:</div>
<div class="mid">有line-height和图片<img src="//www.purecss.cn/images/level3.gif" width="37" height="30"/></div>
<div class="text">说明:</div>
<div class="mid2">有line-height又有高度的情况</div>
<div class="text">说明:</div>
<div class="mid2">有line-height和图片的情况<img src="//www.purecss.cn/images/level3.gif" width="37" height="48"/></div>
<div class="text">说明:</div>
<h2>在上面测试基础中对图片加入vertical-align:middle;</h2>
<div class="va_m">
<div style="background-color:#CCCCCC;">无样式和图片</div>
<div class="text">说明:</div>
<div style="background-color:#CCCCCC;">无样式有图片<img src="//www.purecss.cn/images/level3.gif" width="37" height="12"/></div>
<div class="text">说明:</div>
<div class="mid3">只有height</div>
<div class="text">说明:</div>
<div class="mid3">有height有图片<span style="background-color:#CCCCCC;"><img src="//www.purecss.cn/images/level3.gif" width="37" height="12"/></span></div>
<div class="text">说明:</div>
<div class="mid">只有line-height</div>
<div class="text">说明:</div>
<div class="mid">有line-height和图片<img src="//www.purecss.cn/images/level3.gif" width="37" height="12"/></div>
<div class="text">说明:</div>
<div class="mid2">有line-height又有高度的情况</div>
<div class="text">说明:</div>
<div class="mid2">有line-height和图片的情况<img src="//www.purecss.cn/images/level3.gif" width="37" height="30"/></div>
<div class="text">说明:</div>
</div>
</body>
</html>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
引用内容
vertical-align
初始值: baseline(缺省值)
可否继承:否
适用于: 内联元素
说明:vertical-align:baseline使元素的基线同父元素的基线对齐.
警告:vertical-align不能影响表格单元中的内容的对齐,对于块元素中的内容也一样.
文字不多,但时常有人范错误,有人说我用了为什么没有效果呢?首行看一下他的代码.
程序代码
.style{vertical-align:middle;.....}
HTML:<div class="style"><img src="地址" />...<div>
分析:从上面的代码可以看出错误就是把样式应用在块元素中了
我们只需要改样式为
程序代码
.style img{vertical-align:middle;.....}
如果STYLE中有其它如INPUT或其它内联元素可写成
程序代码
.style img,.style.input{vertical-align:middle;.....}
或.style *{vertical-align:middle;.....}/*在不影响其它元素的情况下使用这个通配符*/
以上是在没有设置高度/行高的事情下,如果加入了高度和行高的事情下FF可以支持,IE6以下则不完全支持,看以下测试结果.(为了增加明显的效果对图片适当增加了高度)
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单行图文并排垂直居中</title>
<style type="text/css">
.text{
margin:5px 0 15px 0}
}
.mid{
line-height:50px;
background-color:#CCCCCC;
}
.mid3{
height:50px;
background-color:#CCCCCC;
}
.mid2{
line-height:50px;
height:50px;
background-color:#CCCCCC;
}
.va_m img{
vertical-align:middle;
}
</style>
</head>
<body>
<div style="background-color:#CCCCCC;">无样式和图片</div>
<div class="text">说明:</div>
<div style="background-color:#CCCCCC;">无样式有图片<img src="//www.purecss.cn/images/level3.gif" width="37" height="40"/></div>
<div class="text">说明:</div>
<div class="mid3">只有height</div>
<div class="text">说明:</div>
<div class="mid3">有height有图片<span style="background-color:#CCCCCC;"><img src="//www.purecss.cn/images/level3.gif" width="37" height="46"/></span></div>
<div class="text">说明:</div>
<div class="mid">只有line-height</div>
<div class="text">说明:</div>
<div class="mid">有line-height和图片<img src="//www.purecss.cn/images/level3.gif" width="37" height="30"/></div>
<div class="text">说明:</div>
<div class="mid2">有line-height又有高度的情况</div>
<div class="text">说明:</div>
<div class="mid2">有line-height和图片的情况<img src="//www.purecss.cn/images/level3.gif" width="37" height="48"/></div>
<div class="text">说明:</div>
<h2>在上面测试基础中对图片加入vertical-align:middle;</h2>
<div class="va_m">
<div style="background-color:#CCCCCC;">无样式和图片</div>
<div class="text">说明:</div>
<div style="background-color:#CCCCCC;">无样式有图片<img src="//www.purecss.cn/images/level3.gif" width="37" height="12"/></div>
<div class="text">说明:</div>
<div class="mid3">只有height</div>
<div class="text">说明:</div>
<div class="mid3">有height有图片<span style="background-color:#CCCCCC;"><img src="//www.purecss.cn/images/level3.gif" width="37" height="12"/></span></div>
<div class="text">说明:</div>
<div class="mid">只有line-height</div>
<div class="text">说明:</div>
<div class="mid">有line-height和图片<img src="//www.purecss.cn/images/level3.gif" width="37" height="12"/></div>
<div class="text">说明:</div>
<div class="mid2">有line-height又有高度的情况</div>
<div class="text">说明:</div>
<div class="mid2">有line-height和图片的情况<img src="//www.purecss.cn/images/level3.gif" width="37" height="30"/></div>
<div class="text">说明:</div>
</div>
</body>
</html>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
相关文章推荐
- 单行图片文字垂直居中问题――实战
- 【CSS】单行图片与文字垂直居中
- 小技巧:用CSS如何实现单行图片与文字垂直居中
- 用CSS如何实现单行图片与文字垂直居中
- 小技巧:用CSS如何实现单行图片与文字垂直居中
- CSS 解决表单单行文本框中的文字垂直居中问题
- 文字与图片在同一行垂直居中问题
- 文字与图片在同一行垂直居中问题
- css 单行文字 图片垂直居中
- 文字和图片垂直居中问题
- 移动Web单行文字垂直居中的问题
- 多行,单行文字垂直居中,图片垂直居中,图文垂直居中
- 摘抄:CSS如何实现单行图片与文字垂直居中
- 元素,单行文字或多行文字,图片 之 水平垂直居中的方法大全及例子分析
- 图片和span水平垂直居中问题(主要解决小图标+文字水平垂直居中的问题)
- css-图片和文字垂直居中问题
- 图片文字混排的垂直居中、inline-block块元素和行内元素混排的垂直居中问题
- CSS 图片+文字,文字垂直居中问题
- 图片和文字垂直居中
- 图片垂直居中问题