css之div中元素居中
2014-04-04 00:00
253 查看
div元素居中
div中行级元素居中
要求:将<img>和<span>标签居中
解答:div为块级元素,img和span为行内元素。所以这个问题归结为块级元素中的行内元素的居中问题。
line-height为行高,指的是文本行的基线间的距离。
行内元素会生成一个行内框,行内框只是一个概念,它无法显示出来,但是它又确实存在。在没有其他因素影响的时候,行内框等于内容区域,而设定行高则可以增加或者减少行内框的高度,即,即:将行距的值(行高-字体尺寸)除以2,分别增加到内容区域的上下两边,如下图:
由于行高可以应用在任何元素上,因此同一行内的若干元素可能有不同的行高和行内框高。行框是指本行的一个虚拟矩形框,其高度等于本行内所有元素中行高最大的值。当有多行内容时,每行都会有自己的行框。
当内容中含有图片的时候,如果图片的高度大于行高,则含有图片行的行框将被撑大道图片的高度。图片虽然撑开了行框,但是不会影响行高,因此也不会影响到基于行高来计算的其他属性。当行内含有图片的时候,图片和文字的垂直对齐方式默认是基线对齐。所以再未加上以下代码时,图片和文字是底部对齐。
关于line-height这里有篇非常好的blog讲解,line-height详解,效果如下图所示:
div元素中的div居中
div中行级元素居中
<div class="treeTitle"> <img src="images/app.png" /> <span>导航菜单</span> </div>
要求:将<img>和<span>标签居中
解答:div为块级元素,img和span为行内元素。所以这个问题归结为块级元素中的行内元素的居中问题。
#treeTitle { background: url(../images/bj.png); height: 30px; color: white; text-align: left; line-height: 30px; } #treeTitle img{ vertical-align: middle; }
line-height为行高,指的是文本行的基线间的距离。
行内元素会生成一个行内框,行内框只是一个概念,它无法显示出来,但是它又确实存在。在没有其他因素影响的时候,行内框等于内容区域,而设定行高则可以增加或者减少行内框的高度,即,即:将行距的值(行高-字体尺寸)除以2,分别增加到内容区域的上下两边,如下图:
由于行高可以应用在任何元素上,因此同一行内的若干元素可能有不同的行高和行内框高。行框是指本行的一个虚拟矩形框,其高度等于本行内所有元素中行高最大的值。当有多行内容时,每行都会有自己的行框。
当内容中含有图片的时候,如果图片的高度大于行高,则含有图片行的行框将被撑大道图片的高度。图片虽然撑开了行框,但是不会影响行高,因此也不会影响到基于行高来计算的其他属性。当行内含有图片的时候,图片和文字的垂直对齐方式默认是基线对齐。所以再未加上以下代码时,图片和文字是底部对齐。
#treeTitle img{ vertical-align: middle; }
关于line-height这里有篇非常好的blog讲解,line-height详解,效果如下图所示:
div元素中的div居中
相关文章推荐
- css实现高度不固定的div元素模块在页面中水平垂直居中
- 编写css让一个已知宽高的div元素水平居中?垂直居中
- CSS垂直居中div中的input元素
- CSS中position:fixed实现div居中及div内元素实现居中的方法
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
- css控制div中元素居中的示例
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
- CSS中如何把Span标签等行内元素设置为固定宽度及div中内容垂直居中
- css 宽高自适应的div 元素 如何居中 垂直居中
- 纯CSS设计div内部元素水平垂直居中
- DIV+CSS垂直居中一个浮动元素
- css使用box-align和box-pack使div的子元素垂直居中
- css 宽高自适应的div 元素 如何居中 垂直居中
- CSS文字图片div元素居中方法之水平居中
- css实现高度或者宽度不固定的div元素垂直左右居中
- CSS相邻选择器(>)选择子元素而不包含该子元素的子元素,及如何让DIV中的内容垂直居中
- 行内元素和块元素的水平和垂直居中(div与css)
- CSS文字图片div元素居中方法之水平居中
- 使用CSS让DIV,图片等元素居中