浏览器CSS居中的问题

最新推荐文章于 2022-06-06 08:20:59 发布

zhongyangjian

最新推荐文章于 2022-06-06 08:20:59 发布

阅读量749

点赞数

分类专栏： Css

本文链接：https://blog.csdn.net/zhongyangjian/article/details/31404641

版权

Css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我们常常会在开发前端的时候遇见一些层啊图片啊文字啊的居中问题，有时，我们用text-align="center"就可以解决，有时候发现不行，那是自己没搞清楚text-align="center"的用途，它只能针对文字在容器里的居中。如果是层在层中，或者层在body中，要居中，就不能用这句话了。

一、层居中：

网上有很多人说用margin:0 auto;再设置一下层的宽度可以居中，可是这在ie下是不行的，他不会居中，如下：

这样是不行的，火狐我测试过是可以居中的，但IE不行，搞毛啊，我们的大部分的用户还不都是ie和360浏览器么。。。后来研究了半天才发现，人家说用margin:0 auto;再设置一下层的宽度可以居中是对的，只是因为我新建的jsp中页头的<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">这个设置影响的，浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码，我把它写成<!DOCTYPE HTML>，就可以居中了，在各大浏览器都可以了，天哪，我写了几年代码居然不知道这个设置居然会影响居中！！！

其实还有一种方法可以让层居中，就是用Js来控制，不过这样不太好，只有没办法的情况下，或许才会这么用吧：

二、图片居中

一般我们是在div或p标签里让图片居中，可以用如下：

这个在各大浏览器，我都测试过了，可以让图片水平居中