CSS中使用text-align、margin：0 auto居中的示例代碼
發(fā)布時(shí)間：2020-08-17 11:57:40 作者：奶茶吞噬者 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了CSS中使用text-align、margin：0 auto居中的示例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
CSS中使用text-align、margin：0 auto居中
在使用text-align或者是margin：0 auto進(jìn)行居中時(shí)，可能會(huì)出現(xiàn)無(wú)效的情況，下面用兩個(gè)例子來(lái)講解和解決問(wèn)題
示例1：讓內(nèi)聯(lián)元素居中使用text-align
假設(shè)我要讓圖片在其父組件中居中顯示。那首先，父組件應(yīng)該是塊元素（div、p…），然后在父組件中添加屬性text-align:center，隨后此組件中的內(nèi)聯(lián)元素（span、img…）便會(huì)全部居中顯示。
示例2：讓塊元素居中使用margin
使margin：0 auto 的前提條件是該元素有寬度，如果你想使一個(gè)div居中，那你需要為它設(shè)置寬度后再添加margin：0 auto樣式
實(shí)驗(yàn)結(jié)果：
實(shí)驗(yàn)代碼
<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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
在ie7下css居中樣式text-align:center;偏左問(wèn)題解決方法
css樣式text-align:center;在ie7下偏左問(wèn)題，想必有很多朋友的遇到過(guò)吧，下面有個(gè)不錯(cuò)的方法，大家可以參考下，希望對(duì)大家有所幫助2013-09-21實(shí)例方式學(xué)CSS text-align怎么用
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介：水平對(duì)齊（text-align），用以設(shè)定元素內(nèi)文本的水平對(duì)齊方式。 水平對(duì)齊（text-align），用以設(shè)定元素內(nèi)文本的水平對(duì)齊方式。2009-04-02css中margin:0 auto居中問(wèn)題深入探討
在CSS中加了margin:0 auto;卻沒(méi)有效果，不能居中的問(wèn)題；它的本意就是上下邊界為0，左右根據(jù)寬度自適應(yīng)！其實(shí)就是~~水平居中的意思，接下來(lái)為大家介紹下兩個(gè)典型的錯(cuò)誤引起2013-03-15- 很久沒(méi)有寫(xiě)日記了，歸根結(jié)底是很久沒(méi)有學(xué)習(xí)了，一直都在工作，一直用到margin居中，也郁悶很了很久，網(wǎng)上看了大把的問(wèn)答，最后自己就著一個(gè)例子，然后研究了一下，其實(shí)div2010-06-01