容器未在页面居中- CSS/HTML

Question

我有一个问题，试图居中的.footer-strip-container中的元素在页面上。它似乎不会移动到中心，除非我为#text-5元素添加一些侧边填充，我不确定这是为什么。我希望元素居中，如果屏幕是最大1364。

下面是我的html和CSS：

​

    #text-5{
        width:100% !important;
    }
    
    .footer_wrap_inner > .content_wrap{
        width:100% !important;
    }
    
    .footer-strip-container{
        width:100%;
    }
    
    .float-child{
        width:50%;
        float:left;
    }
    
    .footer-strip-col1{
        text-align:left;
    }
    
    .float-text{
        font-size:24px;
        padding-left:50px;
    }
    
    .float-text,
    .float-img{
        float:left;
    }
    
    .footer-strip-col2{
        text-align:right;
    }
    
    @media only screen and (max-width: 1364px) {
      .float-child {
        width:100%;
            float:none;
            clear:right;
      }
    }

<aside id="text-5" class="widget_number_7 column-1_3 widget widget_text">
       <div class="textwidget">
       <div class="footer-strip-container">
          <div class="float-child">
             <div class="footer-strip-col1-text">
                <img src="https://shop.balancecoffee.co.uk/wp-content/uploads/2021/07/ezgif.com-gif-maker-1.gif" alt="Join Balance" class="float-img"><br>
                <span class="float-text">Join Balance and get 20% off your first order</span>
             </div>
             <p></p>
          </div>
          <div class="float-child">
             <div class="klaviyo-form-Re6W9v footer-strip-col2 klaviyo-form form-version-cid-2"></div>
          </div>
       </div>
    </div>
    </aside>

​

Answer 1

您所需要做的就是添加并用下面的代码替换您的.footer-strip-container代码

​

.footer-strip-container{
    width: 50%;
    margin: auto;
}

​

并且您的div将居中

如果你希望你的父容器是100%的，那么使用下面的代码

​

@media only screen and (max-width: 1364px) {
    .float-child {
        width: 50%;
        float: none;
        clear: right;
        margin: auto;
    }
}

​

Answer 2

您不应该使用float，而应该使用flexbox

​

.footer-strip-container {
  display : flex;
  justify-content : center;
  width: 100%;
}

.float-child {
max-width : 50%;
}

.footer-strip-col1 {
  text-align: left;

}

.footer-strip-col1-text {
  display : flex;
  align-items : center;
}

.float-text {
  font-size: 24px;
  padding-left: 50px;
}

.footer-strip-col2 {
  text-align: right;
}

<aside id="text-5" class="widget_number_7 column-1_3 widget widget_text">
        <div class="textwidget">
            <div class="footer-strip-container">
                <div class="float-child">
                    <div class="footer-strip-col1-text">
                        <img src="https://shop.balancecoffee.co.uk/wp-content/uploads/2021/07/ezgif.com-gif-maker-1.gif"
                            alt="Join Balance" class="float-img">
                        <span class="float-text">Join Balance and get 20% off your first order</span>
                    </div>
                    <p></p>
                </div>
                <div class="float-child">
                    <div class="klaviyo-form-Re6W9v footer-strip-col2 klaviyo-form form-version-cid-2"></div>
                </div>
            </div>
        </div>
    </aside>

​

Answer 3

display:flex将减少大量不必要的CSS代码。这里有一个关于Flexbox的完整指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

​

.footer-strip-col1-text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.float-text {
  font-size: 24px;
  padding-left: 50px;
  text-align: center;
}


/*define media query size, for demonstration I used 991px*/

@media only screen and (max-width: 991px) {
  .footer-strip-col1-text {
    flex-direction: column;
  }
  .float-text {
    padding-left: 0;
    padding-top: 20px;
  }
}

<aside id="text-5" class="widget_number_7 column-1_3 widget widget_text">
  <div class="textwidget">
    <div class="footer-strip-container">
      <div class="float-child">
        <div class="footer-strip-col1-text">
          <img src="https://shop.balancecoffee.co.uk/wp-content/uploads/2021/07/ezgif.com-gif-maker-1.gif" alt="Join Balance" class="float-img">
          <span class="float-text">Join Balance and get 20% off your first order</span>
        </div>
        <p></p>
      </div>
      <div class="float-child">
        <div class="klaviyo-form-Re6W9v footer-strip-col2 klaviyo-form form-version-cid-2"></div>
      </div>
    </div>
  </div>
</aside>

​