当宽度的最大宽度为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>
答案 0 :(得分:1)
您可以更改此解决方案的.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;
}
}
答案 1 :(得分:1)
在
上设置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;
}
}
答案 2 :(得分:0)
.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;
align-items: 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>