container is not centering on the page - CSS/HTML [duplicate] - html

Question

This question already has answers here:
How do I center floated elements?
(12 answers)
Closed 1 year ago.
I am having an issue trying to centre the elements within the .footer-strip-container on the page. It doesn't seem to shift to the centre unless I add some side padding for #text-5 element and I am not sure why that is. I want the elements to be centred if the screen is max 1364.
Below is my html and 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

All you need to do is to add to replace your .footer-strip-container code with this
.footer-strip-container{
width: 50%;
margin: auto;
}
and your div would be centered
if you want your parent container to be 100%
then use this code
#media only screen and (max-width: 1364px) {
.float-child {
width: 50%;
float: none;
clear: right;
margin: auto;
}
}

Answer 2

You shouldn't use float use flexbox instead
.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 will reduce a lot of unnecessary CSS code.
Here's a complete guide on 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>