页面元素居中的几种方法

最新推荐文章于 2024-04-12 11:37:26 发布

木星

最新推荐文章于 2024-04-12 11:37:26 发布

阅读量7.5k

点赞数 1

分类专栏： Web技术文章标签： html css 居中

本文链接：https://blog.csdn.net/lk103852503/article/details/39081807

版权

Web技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1前言

做页面布局时，经常会需要将一些页面元素居中显示。当然，你可以设定元素的top、left来使它居中，但是，当父容器的大小发生变化，你不得不修改子元素的top、left来使它保持居中；当用户的显示器分辨率与你的测试机不同，可能会导致界面乱成一片，所以不管从代码的易维护性的角度还是从对不同分辨率显示器的适应性方面来说，这种设置固定值的方法显然是比较拙劣的。因此，做页面布局，应尽量减少使用固定值的布局方式。下面介绍几种页元素居中的方法。

1Div居中

1.1左右居中

在父窗口中设置text-align:center，要注意的是，此方法只对内联元素起作用，所以要在居中的div中设置display:inline-block。以下代码中红线部分表示了如何让3个div在itemContainer中居中显示。

如果是单个元素居中，也可以用margin:0auto，但此方法不能使多个元素在父窗口中居中。

1.2上下居中

text-align属性只能设置左右居中，上下居中可以采用如下方法：top:50%;margin-top:-40px。top:50%设置div顶部位于父容器高度50%的地方，但是div本身有高度，margin-top:-40px表示上移div自身高度的一半。要注意的是父容器要设置overflow:auto，否则以上设置会影响父容器的大小。

如果需要上下左右同时居中，则与2.1所示方法结合使用。

以下代码中红线部分表示了如何使itemContainer在整个页面中居中显示。

2文本居中

方法一：把文本放在div标签中，然后按照div居中的方法设置居中

方法二：左右居中text-align:center，上下居中可以设置在文本的父容器中设置line-height等于父容器高度，如以下代码所示。

3背景图片居中

设置background: 50% 50%，可调整这两个参数使用仅上下居中(background: 0% 50%)和仅左右居中(background: 50% 0%)。

4测试用例

<%@page contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>

<!DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<htmlstyle="width:100%;height:100%">

<head>

.item{background:url("pic.png")no-repeat 50% 50%;position:relative;display:inline-block;width:80px;height:80px;outline:solid2px #000000;;line-height:80px}

</style>

</head>

<bodystyle="width:100%;height:100%;margin:0px;overflow:auto">

<div id="itemContainer"

style="position:relative;width:400px;height:80px;outline:solid 2px#ff0000;text-align:center;top:50%;margin:0 auto;margin-top:-40px">

测试

</div>

测试

</div>

测试

</div>

</body>

</html>

木星

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
页面元素居中的几种方法

1前言做页面布局时，经常会需要将一些页面元素居中显示。当然，你可以设定元素的top、left来使它居中，但是，当父容器的大小发生变化，你不得不修改子元素的top、left来使它保持居中；当用户的显示器分辨率与你的测试机不同，可能会导致界面乱成一片，所以不管从代码的易维护性的角度还是从对不同分辨率显示器的适应性方面来说，这种设置固定值的方法显然是比较拙劣的。因此，做页面布局，应尽量减少使用固定值
复制链接

扫一扫