巧用 translate 定位宽幅音画帖

马黑黑

传统的宽幅音画帖定位方法是用 CSS 的 position 来加以实现，一般用相对定位（relative），也有用绝对对位（absolute）的。都很不错，但还有一个更简单的方法在这里和大家分享。先看示范代码：

<div style="transform: translateX(-340px);">音画代码在此处</div>

这里，父 div 使用了 CSS 的 transform 函数，其 translateX 属性表示平移即水平方向移动，若需要纵向移动则用 translateY 属性，若横向纵向都移动则用 translate（x值, y值）。translate 可以接受负数值，上面的示范代码就用了负数值。

必须注意的是，音画代码要自带高宽，如此，父 div 就会有高度与宽度——容器可以根据装载的东西而改变尺寸。

下楼我测试一个样板，没有音画内容，所以我设定了父 div 的高宽还有底色：

<div style="transform:translateX(-340px); background:rgba(0,0,0,.2); width:1280px; height:750px;"></div>

马黑黑

马黑黑

二楼就一行简短的代码实现的，代码在一楼的最后一行

红影

这个倒也简洁。通过黑黑的例子也知道了，1280的宽度大约在-340的地方是居中的。

我来试验个小背景，看看回复框里的居中的左和高是多少

红影

红影

红影 发表于 2022-1-7 10:05

好像只对宽幅有用的？我已经使劲加大y值了，它咋不下来

红影

哈哈，我居然直接用了translateX，怪不得，现在知道了。可以测试窄幅居中数值了。

加林森

好教程！赞！谢谢老黑！

红影

+280对于200的宽度差不多是居中了。

马黑黑

红影 发表于 2022-1-7 10:03
这个倒也简洁。通过黑黑的例子也知道了，1280的宽度大约在-340的地方是居中的。

我来试验个小背景，看看 ...

小背景容器不如直接用 margin: 0 auto 居中

加林森

再来瞧瞧。

马黑黑

加林森 发表于 2022-1-7 12:03
再来瞧瞧。

掌握了吧

加林森

马黑黑 发表于 2022-1-7 12:16
掌握了吧

嗯嗯

红影

马黑黑 发表于 2022-1-7 10:55
小背景容器不如直接用 margin: 0 auto 居中

我主要想试试看打字到中的时候，数字是多少

马黑黑

红影 发表于 2022-1-7 14:33
我主要想试试看打字到中的时候，数字是多少

嗯嗯，弄清楚尺寸与位置的关系

红影

马黑黑 发表于 2022-1-7 17:07
嗯嗯，弄清楚尺寸与位置的关系

当然是 margin的剧中更准确了，这点是毋庸置疑的。

马黑黑

红影 发表于 2022-1-7 22:10
当然是 margin的剧中更准确了，这点是毋庸置疑的。

作为尝试，你的做法也是可取的

马黑黑

马黑黑

最偷懒的发横幅帖代码：

<img style="position:relative;widht:1200px;height:750px;left:-300px;top:90px;" alt="" src="图片地址" />
播放器代码用 style="transform:translate(260px,-640px);"  安置位置，修改好 xy 值