admin管理员组文章数量:1611398
实操解决绝对定位之后margin:auto失效的问题
前言
最近在学习前端 HTML和 CSS的过程中,遇到了一个问题,那就是将一个div元素(内含文本)利用 position:absolute 属性设置为绝对定位之后,想再对整个元素进行依照设备的水平居中便很难了,也就是说属性及其值:margin:10px auto; 已经失效了,正如下面所示:
一、问题重现
可以看到,在下面的HTML代码中,我定义了一个div元素,并且里边包含了文本,如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/mycss1.css" type="text/css">
<title>Mistake</title>
</head>
<body>
<div class="testing_element">This is a div.</div>
</body>
</html>
首先通过引入外部样式表mycss1.css如下对其进行样式设计。代码如下:
*{
margin: 0;
padding: 0;
}
.testing_element{
width: 100px;
height: 20px;
margin: 100px auto;
padding: 10px 10px;
/* position: absolute; */
text-align: center;
background-color: rgb(11, 138, 248);
}
这里的属性值按照字体的大小设置宽度和高度,使得文字在div元素中居中显示,并且由于 属性值
margin: 100px auto;
的存在,使得整个div元素在根据屏幕的大小水平居中显示,如下图所示:
但是当我们有绝对定位需求的时候,就需要对该元素进行position属性的设置:
*{
margin: 0;
padding: 0;
}
.testing_element{
width: 100px;
height: 20px;
margin: 100px auto;
padding: 10px 10px;
position: absolute;
text-align: center;
background-color: rgb(11, 138, 248);
}
那么此时,margin属性中的auto值就失效了,不再使div元素居中显示,而是靠左显示,如下图所示:
二、解决办法
1.原理
我想到一个方法,那么就是让这个div元素存在于另一个div元素之下,作为外层元素的内容,先让外层元素水平充满整个屏幕,然后利用属性值
text-align:center;
内层div元素便会重新居中显示。但是这样还是不可以完成相应的任务。
那么,我们将这两个属性分开,一个放在外层元素里,一个放在内层元素里,这样便可以成功的实现居中效果,且可以随意的设置元素的层叠顺序了!
2.实操演示
HTML代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/mycss2.css" type="text/css">
<title>Mistake</title>
</head>
<body>
<div class="div_container">
<div class="testing_element">This is a div.</div>
</div>
</body>
</html>
CSS代码如下所示
*{
margin: 0;
padding: 0;
}
.div_container{
margin: 200px auto;
width: 100%;
height: 40px;
position: absolute;
z-index: 0;
background-color: black;
/* text-align: center; */
}
.testing_element{
width: 100px;
height: 20px;
margin: auto;
padding: 10px 10px;
text-align: center;
background-color: rgb(11, 138, 248);
}
效果如下图所示:
本文标签: absolutePositionAutoMargin
版权声明:本文标题:实操解决position:absolute之后margin:auto失效的问题 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1728604501a1165280.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论