大神指导css控制div中元素居中的示例
时间:2022-01-21 00:02:41|来源:网络精心整理
这篇文章主要讲解的是css控制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详解,效果如下图所示:

下一篇:权威技术员解惑css实现连续的英文或数字自动换行的方法
本文标题:大神指导css控制div中元素居中的示例
本文地址:https://www.tabangni.com/cssstudy/54365.html
查看更多与“css DIV 元素居中”有关的文章
推荐阅读
- 1大神指导css控制div中元素居中的示例
- 2大师细说实例讲解CSS3中的box-flex弹性盒属性布局
- 3图文演示基于css3 animate制作绚丽的动画效果
- 4技术牛人细说IE8 CSS hack
- 5笔者阐述css:fixed定位兼容不同系列不同版本的浏览器包括IE6.0
- 6老司机阐述CSS Sprites 圆角制作教程
- 7高手讲说css中使input输入框与img(图片)在同一行居中对齐
- 8主编研习css中position:fixed实现div在窗口上下左右居中
- 9站长传授hCalendar微格式 关于事件和基于时间或地点的活
- 10小编演示网站模板制作中的详情页面的设计方法(图文教程)
最近更新
- 01-21大神指导css控制div中元素居中的示例
- 01-21大神阐明用函数式编程技术编写优美的 JavaScript_ibm
- 01-21权威技术员教您javascript结合Cookies实现浏览记录历史
- 01-21专业技术员说明JavaScript 验证浏览器是否支持javascript的方法小结
- 01-21MySQL 5.7.16 修改密码提示 ERROR 1054 (42S22): Unknown column ''password'' in ''field list''的原因
- 01-21顶级人才详解JavaScript中常见陷阱小结
- 01-21小编说明js toFixed()方法的重写实现精度的统一
- 01-21linux编程之pipe()函数详解
- 01-21ASP.NET 控件开发系列之图片切换web控件
- 01-21小白细说javascript数组遍历for与for in区别详解