开发者社区 问答 正文

如何制作以移动设备为中心的自定义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代码来完成这项工作,或者是否可以提供有关如何进行此工作的任何建议。

展开
收起
社区秘书 2019-12-09 17:01:01 591 分享 版权
阿里云 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 助理回答生成答案可能存在不准确,仅供参考
0 条回答
写回答
取消 提交回答