我有一个cookie同意弹出窗口,我在其中添加了一个关闭X按钮。 我需要将按钮对齐在弹出窗口的中间,但按钮偏离了中心。 我知道我可以设置一个margin-top来解决这个问题,但我认为这不是正确的解决方法。
<div class="alert cookiealert" >
By using our website you agree to our Cookie policy
<div class="acceptcookies">
<div class="x"></div>
</div>
</div>
.cookiealert {
position: fixed;
padding-left: 40px;
font-size: 14px;
bottom: 0;
left: 0;
width: 420px;
margin-bottom: 20px;
margin-left: 20px;
z-index: 900;
opacity: 0;
visibility: hidden;
border-radius: 50px;
transform: translateY(80%);
transition: all 500ms ease-out;
color: #000;
background-color: #ecf0f1;
}
.cookiealert.show {
opacity: 1;
visibility: visible;
transform: translateY(0%);
transition-delay: 1000ms;
}
.cookiealert a {
text-decoration: underline
}
.cookiealert .acceptcookies {
position: absolute;
display: inline-block;
margin-left: 25px;
}
.acceptcookies .x {
display: block;
position: fixed;
width: 12px;
height: 12px;
transition: transform .28s ease-in-out;
border-color: rgb(255, 255, 255);
}
.acceptcookies .x:hover {
transform: rotate(90deg);
}
.acceptcookies .x:before {
content: "";
position: absolute;
display: block;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 12px;
height: 0;
border-top: 1px solid rgba(0,0,0,0.5);
transform: rotate(45deg);
transform-origin: center;
}
.acceptcookies .x:after {
content: "";
position: absolute;
display: block;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 12px;
height: 0;
border-top: 1px solid rgba(0,0,0,0.5);
transform: rotate(-45deg);
transform-origin: center;
}
这样写,即使你有多行文字,也是居中的。
.cookiealert.show {
opacity: 1;
visibility: visible;
transform: translateY(0%);
transition-delay: 1000ms;
}
.alert{
position: relative;
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: .25rem;
}
.cookiealert {
font-size: 14px;
bottom: 0;
left: 0;
width: 420px;
margin-left: 20px;
z-index: 900;
transition: all 500ms ease-out;
color: #000;
background-color: #ecf0f1;
}
.cookiealert.show {
opacity: 1;
visibility: visible;
transform: translateY(0%);
transition-delay: 1000ms;
}
.cookiealert a {
text-decoration: underline
}
.cookiealert .acceptcookies {
position: absolute;
top: 0;
bottom: 0;
height: 12px;
margin-top: auto;
margin-bottom: auto;
right: 10px;
}
.acceptcookies .x {
display: block;
position: relative;
width: 12px;
height: 13px;
transition: transform .28s ease-in-out;
border-color: rgb(255, 255, 255);
}
.acceptcookies .x:hover {
transform: rotate(90deg);
}
.acceptcookies .x:before {
content: "";
position: absolute;
display: block;
left: 0;
right: 0;
top: 6px;
bottom: 0;
width: 12px;
height: 0;
border-top: 1px solid rgba(0,0,0,0.5);
transform: rotate(45deg);
transform-origin: center;
}
.acceptcookies .x:after {
content: "";
position: absolute;
display: block;
left: 0;
right: 0;
top: 6px;
bottom: 0;
width: 12px;
height: 0;
border-top: 1px solid rgba(0,0,0,0.5);
transform: rotate(-45deg);
transform-origin: center;
}
<div class="alert cookiealert show" >
By using our website you agree to our Cookie policy
By using our website you agree to our Cookie policy
By using our website you agree to our Cookie policy
<div class="acceptcookies">
<div class="x"></div>
</div>
</div>
你可以修改你的HTML代码,用Flex来对齐 "x "吗?另外,删除 "x"。position: absolute
财产 .cookiealert .acceptcookies
超文本标记语言
<div class="alert cookiealert d-flex" >
<div> By using our website you agree to our Cookie policy </div>
<div class="acceptcookies d-flex align-items-center">
<div class="x"></div>
</div>
</div>
CSS
.cookiealert .acceptcookies {
/* position: absolute; */ /*REMOVE*/
display: inline-block;
margin-left: 25px;
}
.cookiealert {
position: fixed;
padding-left: 40px;
font-size: 14px;
bottom: 0;
left: 0;
width: 420px;
margin-bottom: 20px;
margin-left: 20px;
z-index: 900;
opacity: 0;
visibility: hidden;
border-radius: 50px;
transform: translateY(80%);
transition: all 500ms ease-out;
color: #000;
background-color: #ecf0f1;
}
.cookiealert.show {
opacity: 1;
visibility: visible;
transform: translateY(0%);
transition-delay: 1000ms;
}
.cookiealert a {
text-decoration: underline
}
.cookiealert .acceptcookies {
/* position: absolute; */ /*REMOVE*/
display: inline-block;
margin-left: 25px;
}
.acceptcookies .x {
display: block;
position: fixed;
width: 12px;
height: 12px;
transition: transform .28s ease-in-out;
border-color: rgb(255, 255, 255);
}
.acceptcookies .x:hover {
transform: rotate(90deg);
}
.acceptcookies .x:before {
content: "";
position: absolute;
display: block;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 12px;
height: 0;
border-top: 1px solid rgba(0,0,0,0.5);
transform: rotate(45deg);
transform-origin: center;
}
.acceptcookies .x:after {
content: "";
position: absolute;
display: block;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 12px;
height: 0;
border-top: 1px solid rgba(0,0,0,0.5);
transform: rotate(-45deg);
transform-origin: center;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css">
<div class="alert cookiealert show d-flex">
<div> By using our website you agree to our Cookie policy </div>
<div class="acceptcookies d-flex align-items-center">
<div class="x"></div>
</div>
</div>