Question

您好我正在使用一个WP主题来对待我必须编辑内容区域的内容，因为我们不知道内容区域的宽度，因为根据屏幕分辨率动态更改。

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

我知道不同的方法，例如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

Answer 1

我建议您熟悉以下材料：

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

Answer 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。

Answer 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%);  
}

自动动态内容中心

3 个答案: