媒体查询后居中[重复]

【问题标题】：Centering after media querie [duplicate]媒体查询后居中[重复]
【发布时间】：2020-06-09 06:24:35
【问题描述】：

当宽度的最大宽度为 1124 时，尝试了很多方法来使 div 居中。 "@media only screen and (max-width: 1124px)"

我所做的一切都没有奏效。无论我做什么，它都会停留在屏幕的左侧。 你们中有人有什么想法把它放在中心吗？

谢谢。

Codepen.io Link

.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>

【问题讨论】：

标签： javascript html css responsive center


【解决方案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;
  }
}

【讨论】：

    【解决方案2】：

    设置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;
}
}

    【讨论】：

      【解决方案3】： 

      .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>

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2020-02-17
        • 1970-01-01
        • 2013-03-26
        • 2018-02-17
        • 2014-12-27
        • 1970-01-01
        • 2020-06-18
        • 2014-04-12
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode