在CSS中的居中出现无效的问题怎样解决？

发布时间：2023-07-28 14:35:36 所属栏目：语言来源：

导读：CSS中的居中出现无效的问题怎样解决？一些朋友在使用在使用text-align或者是margin：0 auto进行居中时，出现居中无效的情况，那么这个问题究竟有什么方法来解决呢？下面我们来看两个示例。

示例1：让内联元素

CSS中的居中出现无效的问题怎样解决？一些朋友在使用在使用text-align或者是margin：0 auto进行居中时，出现居中无效的情况，那么这个问题究竟有什么方法来解决呢？下面我们来看两个示例。

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

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

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

    使margin：0 auto 的前提条件是该元素有宽度，如果你想使一个div居中，那你需要为它设置宽度后再添加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>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!