如何讓CSS文件里圖片居中

這篇文章將為大家詳細(xì)講解有關(guān)如何讓CSS文件里圖片居中，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司專(zhuān)注于海曙企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開(kāi)發(fā),商城系統(tǒng)網(wǎng)站開(kāi)發(fā)。海曙網(wǎng)站建設(shè)公司,為海曙等地區(qū)提供建站服務(wù)。全流程按需定制開(kāi)發(fā)，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

讓CSS文件里圖片居中的方法：首先創(chuàng)建一個(gè)HTML示例文件；然后引入一張背景圖片；最后通過(guò)css中的“background-position”屬性實(shí)現(xiàn)圖片居中即可。

CSS讓背景圖片居中的方法

其實(shí)很簡(jiǎn)單，css中的background-position屬性就可以實(shí)現(xiàn)背景圖片的水平和垂直方向居中對(duì)齊，下面我們通過(guò)簡(jiǎn)單的代碼示例來(lái)介紹background-position屬性是如何設(shè)置背景圖片居中顯示的。

我們先使用background屬性顯示背景圖片：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>背景圖片居中</title>
        <style>
            *{margin: 0;padding:0;}
            .demo{
                width: 400px;
                height: 300px;
                margin: 50px auto;
                border: 1px dashed #000;
                background-image:url(1.jpg) ;
                background-size:200px 160px ;
                background-repeat:no-repeat ;
            }
        </style>
    </head>
    <body>
        <div class="demo">
         
        </div>
    </body>
</html>

效果圖：

如何讓CSS文件里圖片居中

接下來(lái)我們看看background-position屬性如何設(shè)置：

1、background-position使用像素設(shè)置背景圖片居中（知道背景圖片的大?。?/p>

例子中背景圖片的右下角和demo盒子的中心重合，要想使背景圖片居中，就要讓背景圖片的中心與demo盒子的中心重合，就需要讓背景圖片向下移動(dòng)高的一半，向右移動(dòng)寬的一半。因此在css中添加以下代碼，就可實(shí)現(xiàn)背景圖片的居中

background-position:100px 70px ; /*寬的一半，高的一半*/

效果圖：

如何讓CSS文件里圖片居中

2、background-position使用50%設(shè)置背景圖片居中，很方便

background-position:50% 50% ;

3、background-position使用center設(shè)置背景圖片居中，很方便。（第2個(gè)center可以省略）

background-position:center center;

上述background-position的三種設(shè)置方法都可以實(shí)現(xiàn)背景圖片的居中，background-position屬性的第一個(gè)值設(shè)置水平位置，第二個(gè)值設(shè)置垂直位置；大家可以視情況而決定使用哪種方法。希望能對(duì)大家的學(xué)習(xí)有所幫助。

關(guān)于“如何讓CSS文件里圖片居中”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

網(wǎng)站標(biāo)題：如何讓CSS文件里圖片居中
文章鏈接：http://muchs.cn/article46/gdsieg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、關(guān)鍵詞優(yōu)化、網(wǎng)站收錄、商城網(wǎng)站、響應(yīng)式網(wǎng)站、定制網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容