我有一个div(固定),就像弹出一样:
<body>
<div class="popup-container">
<div class="popup-item">
Yolowing
</div>
</div>
</body>
这个css允许容器水平居中(宽度为100%使其后面的一切都不可点击;因此,我将其设置为1px):
.popup-container {
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 1px;
z-index: 9999;
}
.popup-item {
display: block;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
但是,由于父元素.popup-item
小于其子元素,我无法居中.popup-container
。当仍能够点击它.popup-item
完全禁用它时,如何居中pointer-events: none
?
答案 0 :(得分:1)
投票关闭几乎拥有它,但是宽度为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%宽。但是,pointer-events:none;
将允许您点击其下方的任何内容。
答案 1 :(得分:0)
一些解决方案。
首先,您可以使用translateX()转换使容器的子容器居中:http://jsfiddle.net/Yjz5R/。使用负边距可以实现相同的效果,但必须设置容器子项的宽度:http://jsfiddle.net/9Qmza/。
CSS:
.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>
样式:http://jsfiddle.net/CVfHt/。
.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;
}
最后,一个问题/评论。如果您不希望容器可见,那么为什么要使用它呢?只需保留孩子的标记并摆脱容器:http://jsfiddle.net/yvc4E/。
答案 2 :(得分:-1)
.popup-container {
position: fixed;
left: 0;
right: 0;
margin-left: auto; /* remove this line - unnecessary*/
margin-right: auto; /* and this line, remove */
width: 1px;
z-index: 9999;
text-align: center; /* add this */
}
.popup-item {
display: inline-block; /* change to inline-block */
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}