css中怎么控制div中元素居中-创新互联

这篇文章给大家介绍css中怎么控制div中元素居中，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

“真诚服务，让网络创造价值”是我们的服务理念，创新互联公司团队十载如一日始终坚持在网站建设领域,为客户提供优质服。不管你处于什么行业，助你轻松跨入“互联网+”时代，PC网站+手机网站+公众号+微信小程序。

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中怎么控制div中元素居中就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

当前标题：css中怎么控制div中元素居中-创新互联
分享URL：https://www.cdcxhl.com/article2/epjic.html

成都网站建设公司_创新互联，为您提供网站营销、全网营销推广、动态网站、域名注册、外贸建站、小程序开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联