如何强制内容以移动视口为中心答案

【问题标题】：How to force content to be centered for mobile viewport如何强制内容以移动视口为中心
【发布时间】：2022-10-24 19:22:28
【问题描述】：

我是新来的，刚开始学习 CSS。这是我的第一个（问题）帖子，也许我的（问题）帖子的格式可能不合适。在这种情况下，我谦虚地请求您的原谅。我在为我的网站应用/编辑 CSS 方面不是很成功。我试图在@media only 屏幕和（最大宽度：420px）视口中居中（图像）内容。搜索，找到并尝试了此论坛中提到的此问题的一些解决方案，但无济于事。问题之一是我的 wordpress 6.x 主题有很多不同的样式表，我不知道它们的操作顺序。这是我在浏览样式表时发现的；每个代码下面是它来自的 css 源文件的名称。有人可以指出我应该编辑哪个文件以及我应该更改或应用哪些代码？如果需要，我可以访问我的网站（仅限本地 atm）或发布屏幕截图！

*来源：responsive.min.css：

@media only screen and (max-width:420px){body.boxed:not(.has_general_padding) .wrapper .wrapper_inner,body.boxed.has_general_padding .wrapper .wrapper_inner,body.boxed footer,body.boxed .header_inner,body。盒装 .full_width .parallax_content,body.boxed .carousel-inner,body.boxed .content_wrapper{width:320px}.header_bottom,footer .container_inner,nav.content_menu{padding:0 15px}.side_menu .close_side_menu_holder{right:12px}。 pp_content{height:250px!important}.pp_hoverContainer{height:200px!important}nav.content_menu .nav_select_menu{border:0}

*来源：响应式.css

@media only screen and (max-width: 420px){

body.boxed:not(.has_general_padding) .wrapper .wrapper_inner,
body.boxed.has_general_padding .wrapper .wrapper_inner,
body.boxed footer,
body.boxed .header_inner,
body.boxed .full_width .parallax_content,
body.boxed .carousel-inner,
body.boxed .content_wrapper{
    width: 320px;
}

.header_bottom,
footer .container_inner,
nav.content_menu{
    padding: 0 15px;
}

.side_menu .close_side_menu_holder{
    right: 12px;
}

.pp_content {
    height: 250px !important;
}
.pp_hoverContainer{
    height: 200px !important;
}
nav.content_menu .nav_select_menu{
    border: none;
}

}

【问题讨论】：

标签： css wordpress

【解决方案1】：

第一个文件（responsive.min.css）是第二个文件（responsive.css）的缩小版，这意味着缩小版没有空格、制表符等无用字符...

css，js，有时甚至是直接html页面等资产的缩小版本用于避免加载无用的字符并加快下载速度。所以你的主题可能是使用缩小版。我真的建议您编辑 responsive.css，然后，感谢您在 Internet 上找到的许多工具，创建缩小版本并替换现有的。

要使内容居中，您有两种方法：

为内容设置固定宽度，然后设置边距：auto;财产;
将内容的容器设置为 display:flex，然后将内容设置为 justify-content: center；

【讨论】：

非常感谢 Emanuele，让我走上了正轨！我将开始处理您的意见。 responsive.css 中的代码量很大，这有点让人不知所措找出代码中必须在哪里进行调整并找到正确的语法来实现我在脑海中可视化的结果也将是一个地狱的挑战。我将不得不通过尝试错误来解决这个问题。 ;-) 但我想这就是学习新事物的全部意义所在。再次感谢！格茨扬

【解决方案2】：

您可以使用 PHP 中的 isset() 函数检查某些输入字段是否未填写：例如：

if (isset($_POST['sku']) {
  //exists
}

在检查产品是否已经存在时，您必须检查它是否存在于数据库中，因此您必须进行查询。

【讨论】：