仅使用HTML和CSS如何将左侧内容移至居中并解决margin-top不生效问题

修复后完整代码 #

<hr>
<i class="btm-content"> Thanks for visiting</i>
<style>
 .btm-content{
   display: block; /* 新增：将行内元素转为块级元素，支持上下margin */
   height: 150px;
   width:100%;
   color: black;
   opacity: 1;
   font-size: larger;
   text-align:center; /* 内部文本居中 */
   margin-top:20px; /* 上边距现在会正常生效 */
}
</style>

修改说明 #

• 对齐了HTML元素类名和CSS选择器，保证样式可以作用到目标元素上。如果你希望保留HTML里的footer类名，把CSS选择器从.btm-content改为.footer也可以达到同样效果
• 新增display: block属性，将原本的行内标签转为块级元素，解决行内元素上下margin不生效的问题
• 如果你需要元素本身在页面水平居中（非仅内部文本），可以将width改为固定值后加margin: 20px auto 0 auto属性即可