CSS margin与论坛中宽幅帖子的定位
<p>CSS的margin属性用于设定元素的外边距，试看下面的示例：粉色矩形基于红色边框矩形的左外边距为100px：<br><br></p><div style="margin: auto; width: 400px; height: 300px; border: 1px solid red; position: relative;">
<div style="margin: 0 0 0 100px; background: pink; width: 100px; height: 100px;"></div>
</div>
<p><br>对于粉色矩形而言，左边外边距设置为100px，它离红色边框矩形左边边线的距离就是100px，这就是外边距的作用：对于设定外边距 margin 属性值的元素而言，外边距的值会迫使它在四个方向与父元素拉开margin所设定的四个方向的margin值的距离。<br></p>
<p><br>margin属性可以设定四个方向的值，比如上例，粉色矩形的margin属性如此设置：<br></p>
<p><br></p><p>margin: 0 0 0 100px;<br></p><p><br></p><p>四个方向的值用空格隔开，顺序是 上 右 下 左。如果四个值设置成一样，写成：margin: 100px; 。如果上下一样、左右一样，写成：margin: 50px 100px;。我们还可以单独设置某个方向的margin值，比如只设定左边的外边距，写成：margin-left: 100px;，其余没有定义的，默认为0。另外的四个方向分别是：margin-top（上）、margin-right（右）、margin-bottom（下）。<br></p>
<p><br>可以利用 margin 属性定位子元素在父元素中的位置。上例中，粉色子元素高宽为100*100，设父元素的尺寸可能是不确定的，现在，假设我们想让粉色子元素在父元素的水平方向居中，粉色的margin属性可以这么设置：<br></p>
<p><br>margin: 0 0 0 calc(50% - 50px);</p>
<p><br>或者：<br><br>margin-left: calc(50% - 50px);<br></p>
<p><br>效果：<br></p>
<div style="margin: auto; width: 400px; height: 300px; border: 1px solid red; position: relative;">
<div style="margin-left: calc(50% - 50px); background: pink; width: 100px; height: 100px;"></div>
</div>
<p><br>那么，假设上面的红色边框矩形就是我们论坛里的帖子正文的容器，那么，我们可以用上述方法给帖子做水平定位，即设置 margin-left 的值。不过，悲催的是，论坛的结构要比上例复杂，帖子的父容器建立在或者就是 table 标签，我们帖子的父亲——父元素——不那么明晰，所以要在上例的基础上做些改变，其实也就是在计算当中纳入帖子左边框，亦即用户头像所在的边框，其尺寸必须包含在计算中。目测其宽度为162px，它的一半即 81px 加入到 calc() 计算函数内即可：</p><p><br></p><p>margin-left: calc(50% - 帖子宽度的一半 - 81px);</p><p><br></p><p>例如，如果帖子的宽度为 1000px，则：</p><p><br></p><p>margin-left: calc(50% - 581px);</p><p><br></p><p>也可以直接使用定位属性 left 值来设定帖子居中：left: calc(50% - 581px);</p><p><br></p><p>margin 和 left 都可以居中帖子，margin的好处主要在本地测试和论坛发布保持基本一致，本地测试时帖子是可以看全的，left在本地就会有一部分看不到。</p> 水平居中也可以 margin:0px auto; 原理讲解得很清楚，好教程！ 起个网名好难 发表于 2022-11-6 09:56
水平居中也可以 margin:0px auto;
实际应用中，水平居中用margin:0px auto; 简单！点赞！ 本帖最后由 马黑黑 于 2022-11-6 11:29 编辑
相约爱晚亭 发表于 2022-11-6 10:39
实际应用中，水平居中用margin:0px auto; 简单！点赞！
标准写法是：margin: auto 0;
0其实要不要都行：既然是外边距为0，就是默认值，所以，简写成：margin: auto;
这是常规环境下的用法 本帖最后由 马黑黑 于 2022-11-6 11:28 编辑
起个网名好难 发表于 2022-11-6 09:56
水平居中也可以 margin:0px auto;
常规环境下可以的 本帖最后由 起个网名好难 于 2022-11-6 11:30 编辑 <br /><br />马黑黑 发表于 2022-11-6 11:18
论坛里不行的，只有常规环境下可以：margin: auto;
<div style="width:400px;height:300px;position:relative;margin:10px auto;background-color:skyblue;"></div>
本帖最后由 马黑黑 于 2022-11-6 11:38 编辑
起个网名好难 发表于 2022-11-6 11:28
<div style="width:400px;height:300px;position:relative;margin:10px auto;background-color:skyblue ...
那不错，之前试过margin就是没能通过的，我指的是宽幅帖子 学习了
例如，如果帖子的宽度为 1000px，则：
margin-left: calc(50% - 581px);
前几天我碰到这个代码我不懂，直接修改为left: xxxpx;了{:4_173:}
马黑黑 发表于 2022-11-6 11:30
那不错，之前试过margin就是没能通过的
块级元素都是可以的，行内元素则需要父元素里的text-align:center; 起个网名好难 发表于 2022-11-6 11:33
块级元素都是可以的，行内元素则需要父元素里的text-align:center;
这里说的是宽幅帖子，你把你的办法试一下 1200 px宽度的看看 小辣椒 发表于 2022-11-6 11:33
学习了
例如，如果帖子的宽度为 1000px，则：
left属性也是可以的 马黑黑 发表于 2022-11-6 11:35
这里说的是宽幅帖子，你把你的办法试一下 1200 px宽度的看看
论坛这楼层宽度才800px;让1200px的块居中？ 相约爱晚亭 发表于 2022-11-6 10:39
实际应用中，水平居中用margin:0px auto; 简单！点赞！
论坛里的宽幅帖子，margin: auto; 是不行的，因为帖子作为子元素，其宽度超过了父元素，需要移位，这才涉及到计算问题的。试看：
<div style="width:1200px;height:300px;position:relative;margin:10px auto;background-color:skyblue;">width: 1200px; margin: 0px auto;</div>
<p><br><br>再看<br><br></p>
<div style="width:1200px;height:300px;position:relative;margin-left: calc(50% - 681px);background-color:skyblue;">width: 1200px; margin-left: calc(50% - 681px);</div> 起个网名好难 发表于 2022-11-6 11:41
论坛这楼层宽度才800px;让1200px的块居中？
我们说的帖子居中，指基于整体视口，所以不用 margin: auto; 的方法 本帖最后由 起个网名好难 于 2022-11-6 11:55 编辑 <br /><br />马黑黑 发表于 2022-11-6 11:44
我们说的帖子居中，指基于整体视口，所以不用 margin: auto; 的方法
我的方法是
<div style="position:relative;width:1200px;height:600px;border:thin red solid;margin-left:-300px;">
<pre><div style="position:relative;width:1200px;height:600px;border:thin red solid;margin-left:-300px;"></div></pre>
</div> 起个网名好难 发表于 2022-11-6 11:52
本帖最后由 起个网名好难 于 2022-11-6 11:55 编辑
我的方法是
你这方法可行，这是直接计算出了结果。
我这里介绍的 CSS calc() 函数也不错的。 马黑黑 发表于 2022-11-6 11:35
left属性也是可以的
昨天我修改了自己想要的位置不行 小辣椒 发表于 2022-11-6 11:56
昨天我修改了自己想要的位置不行
使用 calc() 计算函数，只需关心你的帖子宽度，用它的一半再减去81，公式：
left: calc(50% - 帖子宽度的一半px - 81px);
例如1400宽度的帖子：
left: calc(50% - 781px); 马黑黑 发表于 2022-11-6 11:59
使用 calc() 计算函数，只需关心你的帖子宽度，用它的一半再减去81，公式：
left: calc(50% - 帖子宽 ...
这个我要记录一下。。。。。