** Go down to Post 23 for the final method of doing this.
Well it was so obvious ... I didn't try it ... but just a couple of "<center> </center> did the trick.
i.e...
<div class="col-lg-20 col-md-20 col-xs-20"><br><center><div id="google_translate_element"></div></center>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></div>
Paste the above in place of ...
<div class="col-lg-20 col-md-20 col-xs-20 mcafee">
<?php if ( cz( 'tp_img_left_cart' ) ): ?>
<img src="<?php echo cz( 'tp_img_left_cart' ); ?>" alt="">
<?php endif; ?>
</div>
EDIT: That "mcafee" word needs to be removed or you get two google logos.
AND ... add this extra CSS
.goog-te-gadget-simple {
padding-top: 5px!important;
padding-bottom: 6px!important;
font-size: 7pt!important;
}
body {
margin-bottom: 0px !important;
}
.footer {
position: relative !important;
}
That's it!
