这篇文章主要介绍了css中如何控制div中元素居中的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇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;
}
效果如下图所示：
关于“css中如何控制div中元素居中”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“css中如何控制div中元素居中”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
