How to center content in footer - html

Question

I am building a website using wordpress theme. I have two elements (one floated left, second floated right) in the footer. I need to make it centered (the second one below the first one) when I resize the browser window. I tried giving the <p> and <div> tag a class and then style it to float:none; - hovewer you cann check that It didn't really work on the webpage. I also attach a picture of how I want it to be..
WEBPAGE
<div class="site-info">
<div style="margin:0 auto; width: 75%;">
<p style="float:left;">© Copyright <?= date('Y'); ?> Hotel Švýcarský Dům</p>
<div style="float:right;">Naleznete nás na sociálních sítích:
<a style="display: block; float:right; margin:-4px 0 0 5px;" href=""><img src="/wp-content/themes/adamos/images/gplus.png" /></a>
<a style="display: block; float:right; margin:-4px 5px 0 5px;" href=""><img src="/wp-content/themes/adamos/images/facebook.png" /></a>
</div>
<div class="clear"></div>
</div>
</div><!-- .site-info -->

Answer 1

Here is updated code. with a screen less than 600px, the divs will go on top of each other. This probably will need tweaking to fit on your site.
#left {
float: left;
}
#right {
float: right;
}
#center {
text-align: center;
}
#container {
margin-left: 12.5%;
margin-right: 12.5%;
}
.imagefloat {
display: block;
float: right;
margin: -4px 5px 0 5px;
}
#media (max-width: 600px) {
.nofloat {
width: 100%!important;
text-align: center;
float: none!important;
}
.imagefloat {
float: none!important;
}
}
<div class="site-info">
<div id="container">
<div id="left" class="nofloat">© Copyright
<?=d ate( 'Y'); ?>Hotel Švýcarský Dům</div>
<div id="right" class="nofloat">
<a class="imagefloat" href="">
<img src="/wp-content/themes/adamos/images/gplus.png" />
</a>
<a class="imagefloat" href="">
<img src="/wp-content/themes/adamos/images/facebook.png" />
</a>
</div>
<div id="center">Naleznete nás na sociálních sítích:</div>
<div class="clear"></div>
</div>
</div>

Answer 2

Perhaps add align-text:center to one of the divs and a p tag to put the images on a new line
<div class="site-info">
<div style="text-align:center; width: 75%;">
<p >© Copyright <?= date('Y'); ?> Hotel Švýcarský Dům</p>
<div >Naleznete nás na sociálních sítích:
<p><img src="/wp-content/themes/adamos/images/gplus.png" />
<img src="/wp-content/themes/adamos/images/facebook.png" />
</div>
<div class="clear"></div>
</div>
</div>

Answer 3

Firstly, you kept your float:left and float:right as inline styling so you will need to move the left and right float to an external css as you can't override inline styling with just css.
Secondly, Add a separate class for the left and right, say class="float-left" and class="float-right" and then use media query to switch properties for the classes like this:
#media (max-width: 768px) {
.float-left {
float: none;
}
.float-right {
float: none;
}
}
#media (min-width: 769px) {
.float-left {
float: left;
}
.float-right {
float: right;
}
}
Thirdly, to center the footer text on smaller screens, just add text-align: center to the above media query like this:
#media (max-width: 768px) {
.site-info {
text-align: center;
}
.float-left {
float: none;
}
.float-right {
float: none;
}
}
Lastly, add the icons and text within a <p></p> tag so they will line-break accordingly.