javascript - 动态内容自动中心

标签 javascript jquery css wordpress

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

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

我知道不同的方法,例如 margin: 0 auto、绝对位置或内联 block ,这些方法在其他情况下总是有效。

但是此时我需要类似 Javascript 的东西来计算屏幕分辨率和屏幕中的内容,以便填充可以动态变化到完美的中心。

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

现在不居中,但您可以检查我们用来居中网站的是:

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

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

谢谢!

编辑:我试过这个但没有运气(谢谢 ProllyGeek)

var main_width=parseInt($("#main").width())//获取主要宽度 var content_width=parseInt($(".content_area").width())//获取内容区域宽度 var my_padding=((main_width-content_width )/2).toString() $(".content_area").css("padding-left",my_padding+"px")//给想要的元素设置padding

最佳答案

关于javascript - 动态内容自动中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20175930/

相关文章:

javascript - Angular - 将父 Controller 注入(inject)多个子指令

javascript - 如何使用原型(prototype)继承编写整洁灵活的复杂 javascript 应用程序

javascript - Firebase 云存储 : how to "update all"/"delete some" docs in a collection?

javascript - 在 jQuery 中简洁地添加自定义事件触发器

jquery - 如何一次淡入淡出一个元素?

CSS 绝对滚动与相对滚动

javascript - 按键后更改变量?

javascript - 在父元素外部定义文本换行点?

javascript - 意外的 css 位置 :absolute behavior

html - 固定页眉、可滚动内容、固定页脚布局