当宽度的最大宽度为1124时,尝试了很多操作以使div居中。“ @media only屏幕和(最大宽度:1124px)”
我没有做过的事情。无论我做什么,它都位于屏幕的左侧。你们中有人有什么主意吗?
谢谢。
.offer-title {
margin-top: 14px;
margin-bottom: 14px;
text-align: center;
}
.container-offers {
margin-top: 14px;
margin-left: 4%;
margin-right: 4%;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #ffffff;
}
.offer {
min-height: 680px;
background-color: #edf6fc;
width: 340px;
height: auto;
border-radius: 24px;
text-align: center;
margin-bottom: 14px;
}
.what-included {
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-top: 14px;
}
.check-list {
margin-top: 14px;
}
.price-offer {
font-size: 24px;
font-weight: bold;
margin-top: 14px;
}
.button-offer {
border-radius: 50px;
width: 200px;
padding: 17px 34px 17px;
background-color: dodgerblue;
border: 1px solid dodgerblue;
color: white;
font-weight: bold;
transition: transform 0.2s;
margin-top: 14px;
}
.button-offer:hover {
background-color: #db6307;
transform: scale(1.1);
border: 1px solid #db6307;
color: #000000;
font-weight: bold;
}
@media only screen and (max-width: 1124px) {
.container-offers {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 auto;
}
}
<h1 class="offer-title"> Lorem ipsum</h1>
<div class="container-offers">
<div class="offer">
<h3 class="offer-budget"> Lorem ipsum </h3>
<div class="what-included">
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-times-circle" style="color:red;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-times-circle" style="color:red;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"> <i class="far fa-times-circle" style="color:red;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="price-offer"> Price: </p>
<div class="container-button-offer">
<button class="button-offer"> Lorem ipsum </button>
</div>
</div>
</div>
<div class="offer">
<h3 class="offer-standard"> Lorem ipsum</h3>
<div class="what-included">
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-times-circle" style="color:red;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-times-circle" style="color:red;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="price-offer"> Price: </p>
<div class="container-button-offer">
<button class="button-offer"> Lorem ipsum </button>
</div>
</div>
</div>
<div class="offer">
<h3 class="offer-premium"> Lorem ipsum</h3>
<div class="what-included">
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="check-list"><i class="far fa-check-square" style="color:green;"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p class="price-offer"> Price: </p>
<div class="container-button-offer">
<button class="button-offer"> Lorem ipsum </button>
</div>
</div>
</div>
</div>
来源:https://www.sitepoint.com/media-queries-width-vs-device-width/
[首先,与让所有网站都具有响应能力并遵守媒体查询一样,必须将视口元标记放置在网页的
<head>
部分中。其基本标准版本如下所示。
<meta name="viewport" content="width=device-width,initial-scale=1">
Once we have this snippet of code in our webpage, if we view the page with different devices, the different media queries will be able to have the correct effect.
您可以更改此解决方案的.offer样式。
使用此:
@media only screen and (max-width: 1124px){
.container-offers {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 auto;
}
.offer {
display: block;
margin: 0 auto;
}
}
在align-items: center;
上设置
@media only screen and (max-width: 1124px){
.container-offers {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 auto;
align-items: center;
}
}
在align-items: center;
上设置
@media only screen and (max-width: 1124px){
.container-offers {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 auto;
align-items: center;
}
}