马黑黑 发表于 2022-1-6 23:38

巧用 translate 定位宽幅音画帖

本帖最后由 马黑黑 于 2022-1-6 23:43 编辑

传统的宽幅音画帖定位方法是用 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>

马黑黑 发表于 2022-1-6 23:40

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

马黑黑 发表于 2022-1-6 23:46

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

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

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

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

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

<div style="transform:translate(280px,200px); background:rgba(0,255,0,.3); width:200px; height:100px;"></div>

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

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


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

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

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

加林森 发表于 2022-1-7 10:10

好教程！赞！谢谢老黑！{:4_199:}

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

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

马黑黑 发表于 2022-1-7 10:55

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

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

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

加林森 发表于 2022-1-7 12:03

再来瞧瞧。

马黑黑 发表于 2022-1-7 12:16

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

掌握了吧

加林森 发表于 2022-1-7 12:31

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

嗯嗯

红影 发表于 2022-1-7 14:33

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

我主要想试试看打字到中的时候，数字是多少{:4_173:}

马黑黑 发表于 2022-1-7 17:07

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

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

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

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

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

马黑黑 发表于 2022-1-7 22:36

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

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

马黑黑 发表于 2022-1-9 11:03

本帖最后由 马黑黑 于 2022-1-9 11:04 编辑 <br /><br /><img style="position:relative;widht:1200px;height:750px;left:-300px;top:90px;" alt="" src="https://638183.freep.cn/638183/Pic/%E7%80%91%E5%B8%83.jpg" />
<iframe style="transform:translate(260px,-640px);" frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86" src="https://music.163.com/outchain/player?type=2&amp;id=673350&amp;auto=1&amp;height=66"></iframe>

马黑黑 发表于 2022-1-9 12:23

最偷懒的发横幅帖代码：

<img style="position:relative;widht:1200px;height:750px;left:-300px;top:90px;" alt="" src="图片地址" />
播放器代码用 style="transform:translate(260px,-640px);"安置位置，修改好 xy 值
页: [1]
查看完整版本: 巧用 translate 定位宽幅音画帖