Html 如何将子div与较小的父div居中
我有一个类似弹出窗口的div(固定):Html 如何将子div与较小的父div居中,html,css,Html,Css,我有一个类似弹出窗口的div(固定): <body> <div class="popup-container"> <div class="popup-item"> Yolowing </div> </div> </body> 但是,由于父元素.popup容器比其子元素小,我无法将.popup项居中。如何居中。当仍能单击弹出项时,如何居中。如何单击弹出项
<body>
<div class="popup-container">
<div class="popup-item">
Yolowing
</div>
</div>
</body>
但是,由于父元素
.popup容器
比其子元素小,我无法将.popup项
居中。如何居中。当仍能单击弹出项时,如何居中。如何单击弹出项(指针事件:无
完全禁用它)?投票关闭几乎有它,但由于1px的宽度,元素没有居中
改为这样做:
.popup-container {
position: fixed;
left: 0;
right: 0;
z-index: 9999;
text-align:center;
height:0px;
}
.popup-item {
display: inline-block;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
这将使其居中,因为容器是100%宽的。但是,指针事件:无
将允许您点击它下面的任何内容。一些解决方案
首先,可以使用translateX()transform:,使容器的子级居中。使用负边距可以实现相同的效果,但必须设置容器子级的宽度:
CSS:
或者,您可以使容器“免疫”单击事件:
标记:
<input type = "checkbox" id = "clickToggle" />
<label for = "clickToggle">Click me</label>
<div class="popup-container">
<div class="popup-item">
Yolowing
</div>
</div>
最后,一个问题/评论。如果您不希望容器可见,那么为什么要使用它呢?只需保留子元素的标记并去掉容器:。指针事件的意义是什么,元素没有背景,它不应该捕获任何内容。如果有多个内联块被删除,t它们将彼此站在一边:)@GCyrillus为什么不测试一下,看看呢?正如OP所说,如果它有100%的宽度,那么它下面的所有东西都是不可拾取的。查看以了解指针事件的原因:无;是必要的。我知道指针事件的目的和用途,我确实认为只有在年轻的浏览器中它才能解决问题,他最好将高度设置为0或1 px以避免这种情况。溢出;)@吉里卢斯公平点。我更新了我的答案,改为使用0高度,但没有想到这一点。我很抱歉没有包括一些内容:如果我需要在弹出项中单击一些内容(如链接),该怎么办。指针事件:none不会完全杀死它吗?
.popup-container {
position: fixed;
left: 0;
right: 0;
z-index: 9999;
text-align:center;
height:0px;
}
.popup-item {
display: inline-block;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
.popup-item {
position: absolute;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
<input type = "checkbox" id = "clickToggle" />
<label for = "clickToggle">Click me</label>
<div class="popup-container">
<div class="popup-item">
Yolowing
</div>
</div>
.popup-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(200, 200, 200, 0.5);
pointer-events: none;
}
.popup-item {
position: absolute;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
pointer-events: all;
}
input[type = "checkbox"] {
display: none;
}
input[type = "checkbox"] + label {
cursor: pointer;
}
input[type = "checkbox"]:checked ~ div {
display: none;
}