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

在使用text-align或者是margin：0 auto進行居中時，可能會出現(xiàn)無效的情況，下面用兩個例子來講解和解決問題

示例1：讓內(nèi)聯(lián)元素居中使用text-align

假設(shè)我要讓圖片在其父組件中居中顯示。那首先，父組件應(yīng)該是塊元素（div、p…），然后在父組件中添加屬性text-align:center，隨后此組件中的內(nèi)聯(lián)元素（span、img…）便會全部居中顯示。

示例2：讓塊元素居中使用margin

使margin：0 auto 的前提條件是該元素有寬度，如果你想使一個div居中，那你需要為它設(shè)置寬度后再添加margin：0 auto樣式

實驗結(jié)果：

實驗代碼

<template>
  <div class="father">
    <div>
      <img src="~@/assets/img/rules-detail-no-record.png">
      <span>我是內(nèi)層div內(nèi)容</span>
    </div>
    <span>我是外層div內(nèi)容</span>
    <div class="bg"></div>
  </div>
</template>

<script>
export default {
  name: "test"
}
</script>

<style scoped>
.father{ //使被其包圍的內(nèi)聯(lián)元素居中

  background: #2e90fc;
  text-align: center;
}
.bg{ //塊元素居中
  background: #fc2e80;
  width: 60px;
  height: 60px;
  margin: 0 auto;
}
</style>

總結(jié)

到此這篇關(guān)于CSS中使用text-align、margin：0 auto居中的示例代碼的文章就介紹到這了,更多相關(guān)css使用text-align、margin：0 auto居中內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論