如何制作以移动设备为中心的自定义WordPress页脚
我正在尝试使页脚集中在移动设备上。截至目前，只要我在移动设备上看到它，它就会向右对齐，如下所示：
在此处输入图片说明
我自定义的当前代码是这样的：
<div <?php echo mesmerize_footer_background( 'footer-content center-xs' ) ?>>
<div class="gridContainer">
<div class="row middle-xs footer-content-row">
<div class="footer-content-col col-xs-12">
<?php
echo '
<html>
<style>
.nonprofit {
font-weight: bold;
font-size: 15px;
color: white;
padding-left: 200px;
display: block;
align: right;
}
</style>
<p class="nonprofit"> © 2019 Veterans for Diversity, Inc.</br>Veterans for Diversity, Inc.® is a tax-exempt 501(C)(3) nonprofit organization.</p>
<style>
.nonprofit {
float: left;
}
</style>
<div class="nonprofit">
<a href="https://uwm.edu/informationstudies/nonprofit/" target="_blank"><img src="https://veterans4diversity.org/wp-content/uploads/2019/11/nonprof-IT_icon.jpg" alt="UWM-NonProfIT" width="200" height="55" class="alignnone size-medium wp-image-234" srcset="https://veterans4diversity.org/wp-content/uploads/2019/11/nonprof-IT_icon.jpg, https://veterans4diversity.org/wp-content/uploads/2019/11/nonprof-IT_icon.jpg" sizes="(max-width: 300px) 100vw, 300px"></a>
</div>
</html>
';
?>
</div>
</div>
</div>
我想知道是否可以放置任何@media CSS代码来完成这项工作，或者是否可以提供有关如何进行此工作的任何建议。
展开
收起
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
阿里云 AI 助理回答
为了使页脚在移动设备上居中，您可以使用CSS的@media查询来针对不同屏幕尺寸设置特定样式。这允许您在小屏幕上应用不同的样式，以优化移动设备的显示效果。以下是一个示例，展示了如何修改您的代码以实现页脚居中：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 默认样式 */
.footer {
text-align: right; /* 保持默认右对齐 */
padding: 20px;
background-color: #f8f9fa; /* 示例背景颜色，可根据需要调整 */
}
/* 当屏幕宽度小于等于600px时（示例值，根据实际需求调整）的样式 */
@media (max-width: 600px) {
.footer {
text-align: center; /* 在移动设备上变为居中 */
}
}
</style>
</head>
<body>
<div class="footer">
<p> © 2019 Veterans for Diversity, Inc.Veterans for Diversity, Inc.® is a tax-exempt 501(C)(3) nonprofit organization.</p>
</div>
</body>
</html>
这段代码首先定义了一个.footer类，设置了默认的文本对齐为右对齐，并添加了一些基本样式。然后，通过@media查询，当屏幕宽度不超过600像素时（这个阈值可以根据实际情况调整），将.footer的文本对齐方式更改为居中。
请将此代码段替换您现有的HTML结构中的相应部分，并根据您的具体需求调整样式和断点值。这样，当页面在移动设备上显示时，页脚就会自动居中了。
有帮助
无帮助
AI 助理回答生成答案可能存在不准确，仅供参考
相关问答