我有 this pen here,当它点击媒体查询(最大宽度:475px)时,横幅中的按钮应该放在文本下方并在横幅中居中。我的问题是按钮从媒体查询上方的右侧开始,然后需要放置并居中。我看过here、here和这个stackoverflow,还有this one和this one,还有这个stack和{{ 3}},但无济于事。
如果有人可以在 < 425px 处请 this one 帮我找出缺少的东西,那就太好了。
这里是代码转储
<!DOCTYPE html>
<html>
<head>
<base href="https://s3.ca-central-1.amazonaws.com/whatever/index.esm.js"/>
<style>
* {
box-sizing: border-box;
}
#banner-container {
padding: 32px;
border-radius: 12px;
background: linear-gradient(90deg, rgba(231,248,250,1) 0%, rgba(220,255,226,1) 100%);
display: flex;
flex-direction: row;
height: 152px;
position: relative;
width: 100%;
}
#button-container {
position: absolute;
right: 32px;
transform: translateY(-50%);
top: 50%;
}
#cta-button {
width: 192px;
height: 60px;
padding: 16px 23px 16px 21px;
border-radius: 30px;
background-color: #16a55a;
cursor: pointer;
border: none;
}
#cta-button:hover {
box-shadow: 0 5px 10px 0 rgba(22, 165, 90, 0.5);
}
#cta-button:active {
background-color: #05823f;
}
#cta-button span {
font-family: Lato, sans-serif;
font-size: 20px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.4;
letter-spacing: normal;
text-align: center;
color: #ffffff;
}
@media screen and (max-width: 475px) {
#banner-container {
height: 200px;
}
#button-container {
margin-top: 20px !important;
transform: translateX(-50%);
left: 50%;
}
#cta-button {
margin: 0 auto;
}
#text-container {
margin: 0 auto;
}
}
#top-text {
font-family: Lato, sans-serif;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.43;
letter-spacing: normal;
color: #3c4142;
}
#main-text {
font-family: Lato, sans-serif;
font-size: 24px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.33;
letter-spacing: normal;
color: #404040;
}
#bottom-text {
font-family: Lato, sans-serif;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.43;
letter-spacing: normal;
color: #3c4142;
}
#text-container {
}
#text-container span {
line-height: 20px;
display: flex;
flex-direction: column;
}
#text-container span:nth-child(2), #text-container span:nth-child(3) {
margin-top: 8px;
}
</style>
</head>
<body>
<div id="banner-container">
<div id="text-container">
<span id="top-text">Partner exclusive webinar</span>
<span id="main-text">Be a sales beast</span>
<span id="bottom-text">May 4 | 1 pm EST</span>
</div>
<div id="button-container">
<button id="cta-button">
<span>Register now</span>
</button>
</div>
</div>
</body>
</html>
答案 0 :(得分:1)
经验法则:如果您可以避免绝对定位,请这样做。
这里不需要Absolute定位,简单的flex布局就可以实现你想要的
旧:
#button-container {
position: absolute;
right: 32px;
transform: translateY(-50%);
top: 50%;
}
新:
#button-container {
align-self: center;
margin-left: auto;
}
效果相同
align-self: center;
垂直居中
margin-left: auto;
占用了按钮左侧和第一个兄弟 More on this
当媒体出现时
@media screen and (max-width: 475px) {
#banner-container {
height: 200px;
flex-direction: column; /* Drop the button down */
}
#button-container {
margin: 0 auto; /* to center */
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#banner-container {
padding: 32px;
border-radius: 12px;
background: linear-gradient(90deg, rgba(231,248,250,1) 0%, rgba(220,255,226,1) 100%);
display: flex;
flex-direction: row;
height: 152px;
position: relative;
width: 100%;
}
#button-container {
align-self: center;
margin-left: auto;
}
#cta-button {
width: 192px;
height: 60px;
padding: 16px 23px 16px 21px;
border-radius: 30px;
background-color: #16a55a;
cursor: pointer;
border: none;
}
#cta-button:hover {
box-shadow: 0 5px 10px 0 rgba(22, 165, 90, 0.5);
}
#cta-button:active {
background-color: #05823f;
}
#cta-button span {
font-family: Lato, sans-serif;
font-size: 20px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.4;
letter-spacing: normal;
text-align: center;
color: #ffffff;
}
@media screen and (max-width: 475px) {
#banner-container {
height: 200px;
flex-direction: column;
}
#button-container {
margin: 0 auto;
}
#cta-button {
margin: 0 auto;
}
#text-container {
margin: 0 auto;
}
}
#top-text {
font-family: Lato, sans-serif;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.43;
letter-spacing: normal;
color: #3c4142;
}
#main-text {
font-family: Lato, sans-serif;
font-size: 24px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.33;
letter-spacing: normal;
color: #404040;
}
#bottom-text {
font-family: Lato, sans-serif;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: 1.43;
letter-spacing: normal;
color: #3c4142;
}
#text-container {
}
#text-container span {
line-height: 20px;
display: flex;
flex-direction: column;
}
#text-container span:nth-child(2), #text-container span:nth-child(3) {
margin-top: 8px;
}
<div id="banner-container">
<div id="text-container">
<span id="top-text">Partner exclusive webinar</span>
<span id="main-text">Be a sales beast</span>
<span id="bottom-text">May 4 | 1 pm EST</span>
</div>
<div id="button-container">
<button id="cta-button">
<span>Register now</span>
</button>
</div>
</div>