CSS中使用text-align、margin：0 auto居中的示例代码

CSS中使用text-align、m arg in：0 auto居中

在使用 text-align 或者 是 mar gin ：0 auto 进行居中时，可能会出现无效的情况，下面用两个例子来 讲解 和解决问题

示例1：让内联元素居中使用text-align

假设我要让图片在其父组件中居中显示。那首先，父组件 应该 是块元素（div、p&helli p; ），然后 在父组件中 添加属性text-align: center ，随后此组件中的内联元素（span、 img …）便会全部居中显示。

示例2：让块元素居中使 用M argin

使margin：0 auto 的 前提条件 是该元素有 宽 度，如果你想使一个div居中，那你需要为它设置宽度后再添加 margin：0 auto 样式

实验结果：

实验代码

<template>
  <div class="father">
    <div>
      <img src="~@/assets/img/rules-det ai l-no-record.png">
      <span>我是内层div内容</span>
    </div>
    <span>我是外层div内容</span>
    <div class="bg"></div>
  </div>
</template>

<script>
 export  default {
  n am e: " test "
}
</script>

<style sco PE d>
.father{ //使被其包围的内联元素居中

  background:  # 2e90 fc ;
  text-align: center;
}
.bg{ //块元素居中
  background: #fc2e80;
  width: 60px;
  h ei ght: 60px;
  margin: 0 auto;
}
</style>

总结

到此这篇关于CSS中使用text-align、margin：0 auto居中的示例代码的 文章 就介绍到这了,更多相关css使用text-align、margin：0 auto居中内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 CSS中使用text-align、margin：0 auto居中的示例代码 全部内容，希望文章能够帮你解决 CSS中使用text-align、margin：0 auto居中的示例代码 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS中使用text-align、margin：0 auto居中的示例代码的详细内容...