CSS中使用text-align、margin：0 auto居中

在使用

text-align

margin：0 auto

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

假设我要让图片在其父组件中居中显示。那首先，父组件应该是块元素（div、p…），然后

在父组件中

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

使margin：0 auto 的

前提条件

margin：0 auto

实验结果：

实验代码

<template>  <div class="father">    <div>      <img src="~@/assets/img/rules-detail-no-record.png">      <span>我是内层div内容</span>    </div>    <span>我是外层div内容</span>    <div class="bg"></div>  </div></template><script>export default {  name: "test"}</script><style scoped>.father{ //使被其包围的内联元素居中  background: #2e90fc;  text-align: center;}.bg{ //块元素居中  background: #fc2e80;  width: 60px;  height: 60px;  margin: 0 auto;}</style>

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