如何将页脚中的内容居中
How to center content in footer
我正在使用 wordpress 主题构建网站。我在页脚中有两个元素(一个向左浮动,第二个向右浮动)。当我调整浏览器 window 大小时,我需要使其居中(第一个下方的第二个)。我试着给 <p>
和 <div>
标签一个 class ,然后将其样式设置为 float:none;
- 但是你无法检查它在网页上是否真的有效。我还附上了一张我想要的照片..
<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 -->
也许将 align-text:center 添加到其中一个 div 和 p 标签以将图像放在新行上
<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><a href=""><img src="/wp-content/themes/adamos/images/gplus.png" /></a>
<a href=""><img src="/wp-content/themes/adamos/images/facebook.png" /></a>
</div>
<div class="clear"></div>
</div>
</div>
首先,您将 float:left
和 float:right
保留为内联样式,因此您需要将左右浮动移至外部 css,因为您无法覆盖内联仅使用 css.
样式
其次,为左右添加一个单独的class,例如class="float-left"
和class="float-right"
,然后使用媒体查询来切换class的属性,例如这个:
@media (max-width: 768px) {
.float-left {
float: none;
}
.float-right {
float: none;
}
}
@media (min-width: 769px) {
.float-left {
float: left;
}
.float-right {
float: right;
}
}
第三,要在较小的屏幕上将页脚文本居中,只需将 text-align: center
添加到上述媒体查询中,如下所示:
@media (max-width: 768px) {
.site-info {
text-align: center;
}
.float-left {
float: none;
}
.float-right {
float: none;
}
}
最后,在 <p></p>
标签内添加图标和文本,以便它们相应地换行。
这是更新后的代码。对于小于 600px 的屏幕,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>
我正在使用 wordpress 主题构建网站。我在页脚中有两个元素(一个向左浮动,第二个向右浮动)。当我调整浏览器 window 大小时,我需要使其居中(第一个下方的第二个)。我试着给 <p>
和 <div>
标签一个 class ,然后将其样式设置为 float:none;
- 但是你无法检查它在网页上是否真的有效。我还附上了一张我想要的照片..
<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 -->
也许将 align-text:center 添加到其中一个 div 和 p 标签以将图像放在新行上
<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><a href=""><img src="/wp-content/themes/adamos/images/gplus.png" /></a>
<a href=""><img src="/wp-content/themes/adamos/images/facebook.png" /></a>
</div>
<div class="clear"></div>
</div>
</div>
首先,您将 float:left
和 float:right
保留为内联样式,因此您需要将左右浮动移至外部 css,因为您无法覆盖内联仅使用 css.
其次,为左右添加一个单独的class,例如class="float-left"
和class="float-right"
,然后使用媒体查询来切换class的属性,例如这个:
@media (max-width: 768px) {
.float-left {
float: none;
}
.float-right {
float: none;
}
}
@media (min-width: 769px) {
.float-left {
float: left;
}
.float-right {
float: right;
}
}
第三,要在较小的屏幕上将页脚文本居中,只需将 text-align: center
添加到上述媒体查询中,如下所示:
@media (max-width: 768px) {
.site-info {
text-align: center;
}
.float-left {
float: none;
}
.float-right {
float: none;
}
}
最后,在 <p></p>
标签内添加图标和文本,以便它们相应地换行。
这是更新后的代码。对于小于 600px 的屏幕,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>