动态内容的自动中心答案

【问题标题】：Automatic center for dynamic content动态内容的自动中心
【发布时间】：2015-10-08 00:58:01
【问题描述】：

您好，我正在使用 WP 主题来使内容居中，我必须编辑 padding-left，因为我们不知道内容区域的宽度，因为会根据屏幕分辨率动态变化。

问题是由于不同的浏览器有不同的滚动宽度，有时没有滚动很难放置一个完美的中心位置，从“padding-left”和媒体查询计算出来。

我知道不同的方法，例如 margin: 0 auto、绝对位置或在其他情况下始终有效的内联块。

不过，此时我需要类似 Javascript 的东西来计算屏幕分辨率和屏幕中的内容，以便填充可以动态更改为完美的中心。

网站链接为：http://www.fanonfire.com/magazine/

目前未居中，但您可以检查我们用于使网站居中的内容是：

.content_area {padding: 10px 0 0px 107px;}

使用不同的 media_queries 更改最后一个数字。但这不会产生真正的中心位置，并且过程非常缓慢。所以我不知道是否可以使用 Javascript 执行此操作并根据屏幕生成自动填充。

谢谢！

编辑：我尝试了这个但没有运气（感谢 ProllyGeek）

var main_width=parseInt($("#main").width()) // get main width var content_width=parseInt($(".content_area").width()) // get content area width var my_padding=((main_width-content_width )/2).toString() $(".content_area").css("padding-left",my_padding+"px") //set padding to the desired element

【问题讨论】：

标签： javascript jquery css wordpress

【解决方案1】：

我建议你熟悉以下材料：

http://www.demtron.com/blog/post/2009/01/14/Centering-a-DIV-Window-with-Cross-Browser-JavaScript.aspx

【讨论】：

【解决方案2】：

如果你想用 jquery 来做这件事很好，这里有一个快速的伪代码

var container_width=parseInt($("#container").width()) // get container width
var content_width=parseInt($("#content").width())  // get content area width

var my_padding=((container_width-content_width )/2).toString()


$("#content").css("padding-left",my_padding+"px") //set padding to the desired element

http://jsfiddle.net/LmBRp/3/

如果您想看到它居中，请将 padding-left 替换为 margin-left。

【讨论】：

谢谢，但我使用的实际模板无法使用绝对位置。我需要一些东西而不改变模板的所有法典来根据屏幕大小动态改变“padding-left”。谢谢！
这是使用 jquery 最简单的方法。
谢谢，类似的事情应该如何工作。但是，我尝试使用正确的类名称（已编辑）将该代码添加到我的 header.php 中，但仍然没有做任何事情。有什么想法吗？
您确定内容区域是容器的子项吗？！
让我做一个快速的 jsfiddle 示例

【解决方案3】：

我在尝试将不同长度的字幕放在幻灯片中时也遇到了这个问题。

要将具有动态宽度的绝对定位元素居中，您可以使用 transform: translateX.使用前缀，这适用于大多数现代浏览器。像这样：

div {
  width: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);  
}

【讨论】：