如何将内容从左侧移动到中心？

Question

我正在仅使用 html 和 css 开发一个页面，我的要求是我想将内容从左侧移动到中心，并且我想提供一些边距顶部但它没有反映，请帮助我实现这件事

<hr>
<i class="footer"> Thanks for visiting</i>
<style>
 .btm-content{
   height: 150px;
   width:100%;
 color: black;
 opacity: 1;
 font-size: larger;
text-align:center;
margin-top:20px;
}
</style>

Answer 1

您可以使用 flex 将您的内容与它所在容器的任何一侧对齐。下面的代码显示了您可以使用 flexbox 设置样式的一些不同方式。

 body{ display:flex; flex-wrap:wrap; } div{ width:100px; height:100px; margin:10px; background:#dadada; display:flex; } div:nth-of-type(1){ justify-content:center; align-items:center; } div:nth-of-type(2){ justify-content:flex-start; align-items:center; } div:nth-of-type(3){ justify-content:flex-end; align-items:center; } div:nth-of-type(4){ justify-content:center; align-items:flex-start; } div:nth-of-type(5){ justify-content:center; align-items:flex-end; }

 <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div>

Answer 2

默认情况下， i 标签是内联的，所以...

 .footer { display:  block; text-align: center }