X（测试新论坛帖子居中机制）

马黑黑

马黑黑

<style>
	@import 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.css?v=1';
	#tz { width: 1280px; height: 720px;background: #192039 url('https://638183.freep.cn/638183/t24/webp3/x.webp') no-repeat center/cover; }
	#mplayer { bottom: 30px; }
	#fsbtn { top: 30px; left: 30px; }
</style>

<div id="tz" class="pa">
	<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1835389484" autoplay loop></audio>
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/13/49/58/video63635686b7b48.mp4" autoplay loop></video>
</div>

<script type="module">
	import { hcplay } from 'https://638183.freep.cn/638183/web/ku/hcplayer3in1.js?v=1';
	hcplay(tz);
	const xCenter = (el) => {
	    const rt = el.getBoundingClientRect();
	    const ww = window.innerWidth;
	    const ox = (ww - rt.width) / 2 - rt.left;
	    el.style.transform = `translateX(${ox}px)`;
	};
	xCenter(tz);
</script>

马黑黑

居中机制由 JS 实现，代码在 16~22 行。

xCenter 是一个函数，需要一个参数，帖子 id标识，HTML代码中帖子标签里 id=“tz" 那就是 xCenter(tz)，以此类推。

这个实现机制通用语所有 discuz 论坛，只需设置帖子宽高，无需考虑论坛自身的相关设定。但这个机制在本人个人网站中不适用，因为由于采用自适应机制，帖子会撑宽容器。

花飞飞

这个贴子1280比平时作品宽大一些。
之前用margin: 30px 0 30px calc(50% - 593px);计算令其居中。
这是新的居中方式，我刚发一个贴子，到是可以试试。

马黑黑

花飞飞 发表于 2025-4-1 19:57
这个贴子1280比平时作品宽大一些。
之前用margin: 30px 0 30px calc(50% - 593px);计算令其居中。
这是新 ...

这个算法的特色是，不论在哪一个 基于discuz 的论坛，都通用，不用再去关系论坛主帖内容容器的偏移量

花飞飞

马黑黑 发表于 2025-4-1 20:01
这个算法的特色是，不论在哪一个 基于discuz 的论坛，都通用，不用再去关系论坛主帖内容容器的偏移量

用了这个新的居中，我宽度1700贴子已更改成功了
音画作品居中一直是一个问题，这几行代码完美适配所有贴子。。

马黑黑

花飞飞 发表于 2025-4-1 20:06
用了这个新的居中，我宽度1700贴子已更改成功了
音画作品居中一直是一个问题，这几行代码完美 ...

它也有缺点：刚打开时，如果网速慢，或服务器相应慢，会看到帖子的调整位置的过程

花飞飞

马黑黑 发表于 2025-4-1 20:08
它也有缺点：刚打开时，如果网速慢，或服务器相应慢，会看到帖子的调整位置的过程

还赠送过程演示，岂不是又赚了。。我没看到。

马黑黑

花飞飞 发表于 2025-4-1 20:11
还赠送过程演示，岂不是又赚了。。我没看到。

网速很快的时候，这个动作看不到

花飞飞

马黑黑 发表于 2025-4-1 19:49
居中机制由 JS 实现，代码在 16~22 行。

xCenter 是一个函数，需要一个参数，帖子 id标识，HTML代码中帖 ...

看到网站里发的，不是撑宽，而是偏左。。。
还真是为论坛量身定制的呀

马黑黑

花飞飞 发表于 2025-4-1 20:16
看到网站里发的，不是撑宽，而是偏左。。。
还真是为论坛量身定制的呀

它显示将容器撑宽，然后左移，但它的的确确是居中的

花飞飞

马黑黑 发表于 2025-4-1 20:21
它显示将容器撑宽，然后左移，但它的的确确是居中的

原来如此，现在去看它又好了。。

花飞飞

马黑黑 发表于 2025-4-1 20:11
网速很快的时候，这个动作看不到

看到看不到感觉都挺好。。我再开一遍让它演一下

马黑黑

花飞飞 发表于 2025-4-1 20:46
原来如此，现在去看它又好了。。

不用居中机制，或研究一下，改用另外的方式

马黑黑

花飞飞 发表于 2025-4-1 21:01
看到看不到感觉都挺好。。我再开一遍让它演一下

其实是刷新

红影

马黑黑 发表于 2025-4-1 19:49
居中机制由 JS 实现，代码在 16~22 行。

xCenter 是一个函数，需要一个参数，帖子 id标识，HTML代码中帖 ...

这个更方便了，不用管帖子的宽度了，也不用计算了，可以利用JS来保证了呢

红影

JS太伟大了，什么都能做啊

花飞飞

马黑黑 发表于 2025-4-1 21:01
不用居中机制，或研究一下，改用另外的方式

还有别的方式啊。。尽管开发，我当实验的小白。。

红影

这帖子的节奏好舒服啊，一进来就觉得挺振奋，再看到有新的定位方式，更振奋

花飞飞

马黑黑 发表于 2025-4-1 21:02
其实是刷新

就是我把网页开得多多的，然后再开它，就可以看到过渡了。