我正在使用wordpress主题构建网站。页脚中有两个元素(一个向左浮动,第二个向右浮动)。调整浏览器窗口大小时,需要使其居中(第二个位于第一个下方)。我尝试给<p>
和<div>
标记一个类,然后将其设置为float:none;
样式-但是您无法检查它在网页上是否真的起作用。我还附上一张我想要的图片。
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 -->
最佳答案
这是更新的代码。屏幕小于600像素,则div会彼此重叠。这可能需要进行调整以适合您的网站。
#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>
关于html - 如何在页脚中居中放置内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29521670/