CSS margin与论坛中宽幅帖子的定位

马黑黑

起个网名好难 发表于 2022-11-7 18:27
好吧， 不再提问。

也许我们的讨论不会有好结果，因为大家不在一个基点上看问题

红影

“用户头像所在的边框，其尺寸必须包含在计算中。”
论坛里还要考虑这个，没想到。也跟着去测了一下，的确是162

马黑黑

起个网名好难 发表于 2022-11-7 18:24
只是为搞清楚其中道理没别的意思。

大家看了你这方法都说好不就是搬过去用了吗。

要搞懂原理并不难的：

calc(50% - 子元素宽度的一半px);

50%是子元素 left 在父元素的值，中央。left值在中央并不能令子元素居中，减去它宽度的一半便可。

马黑黑

红影 发表于 2022-11-7 19:08
“用户头像所在的边框，其尺寸必须包含在计算中。”
论坛里还要考虑这个，没想到。也跟着去测了一下，的确 ...

这个是我目测的，当然也可以通过F12查看元素找到真实尺寸

红影

如果留出头像，用margin:100px 0 0 calc(50% - 580px); 是不是下面就不用加那么多的<br>了?

起个网名好难

马黑黑 发表于 2022-11-7 19:09
要搞懂原理并不难的：

calc(50% - 子元素宽度的一半px);

三个与屏幕不相干的量怎么就做到了屏幕居中的？ 我来说一下为什么，你看有没有道理

论坛本身是相对屏幕居中的，这个是关键，帖子要做到相对屏幕居中只要做到相对论坛居中，于是就有了…………

cala只是实现目的的手段，而不是原理。

马黑黑

起个网名好难 发表于 2022-11-7 19:16
三个与屏幕不相干的量怎么就做到了屏幕居中的？ 我来说一下为什么，你看有没有道理

论坛本身是相对屏 ...

也是原理。利用 calc() 进行子元素定位，不论居于何种环境（当然需要定位前提），它都能令子元素居中，因为它本身的这样的设定就是居中的。

马黑黑

红影 发表于 2022-11-7 19:12
如果留出头像，用margin:100px 0 0 calc(50% - 580px); 是不是下面就不用加那么多的了?

它这里只是定义水平方向的居中，与纵向方向无关。你可以这样设定，以便能让头像显示出来：

margin: 120px 0 0 calc(50% - npx);

这是四个方向都定义了外边距：上120、右0、下0、左 calc(50% - npx)，你也可以给下设一个值看看。

起个网名好难

马黑黑 发表于 2022-11-7 19:42
也是原理。利用 calc() 进行子元素定位，不论居于何种环境（当然需要定位前提），它都能令子元素居中，因 ...

即使知道相对论坛居中也就是相对屏幕居中也需要想法子去实现它， 你给出了实现的方法。

马黑黑

起个网名好难 发表于 2022-11-7 19:51
即使知道相对论坛居中也就是相对屏幕居中也需要想法子去实现它， 你给出了实现的方法。

方法是多种的，你的研究其实非常有价值，你的实现方式也是非常理想的

执著

这就是老师昨天教我的那个内容！

马黑黑

执著 发表于 2024-3-14 22:30
这就是老师昨天教我的那个内容！

是的吧