首頁 web前端 css教學 CSS常見居中討論

CSS常見居中討論

Feb 10, 2017 pm 04:26 PM

      先來一個常見的案例,把一張圖片和下方文字進行居中:

       CSS常見居中討論

     

     

    align即可:CSS常見居中討論

<style>
    .container{
        text-align: center;
    }</style><p>
    <img  src="/static/imghw/default1.png" data-src="Mars.png" class="lazy" alt="CSS常見居中討論" >
    </p><p>火星</p>
登入後複製

      實際的效果如下:

CSS常見居中討論

火星

 

       這樣做的問題是,直接在最外層的container設置一個text-align的屬性,導致所有子元素都會繼承,假設圖片標題下方還有文字描述,那麼這個文字描述也會被居中,如下所示:


火星

CSS常見居中討論火星(Mars)是太陽系八大行星之一,天文符號是

       但實際上是希望文字描述向左對齊,這樣就不得不在文字描述添加一個text-align:left的屬性,覆蓋父元素的屬性,並且如果還有更多的子元素也需要這樣做,覆蓋屬性本身就是下策,因此這裡採用其它的辦法。由於顯示的圖片是變化的,寬高是不定的,所以一般會顯示地給圖片設定一個寬高。如果知道寬度就可以用margin: 0 auto的方法,左右的margin值設定為auto,瀏覽器就會自動設定左右的margin值為容器剩餘寬度的一半:

火星

(Mars)是太陽系八大行星之一,天文符號是♂

 代碼如下:

CSS常見居中討論

<style>
    figure{
        width: 100px;
        margin: 0 auto;
    }
    figcaption{
        text-align: center;
    }</style>
    <p>
        <figure>
            <img  src="/static/imghw/default1.png" data-src="Mars.png" class="lazy" alt="CSS常見居中討論" >
            <figcaption>火星</figcaption>
        </figure>
        </p><p>火星(Mars)是太阳系八大行星之一,天文符号是♂</p>
    
登入後複製

  需要注意的是,這個辦法對上下居中不適用。

CSS常見居中討論      使用margin: 0 auto可以說是最常見的左右居中方法,不僅適用於區塊元素也適用於行內元素。許多網頁的版面都是主體內容固定寬度同時居中顯示,例如淘寶PC端:

 

       查看最外層的容器的樣式就可以發現使用了margin: 0 auto:

接下來討論最外層的容器的樣式就可以發現使用了margin: 0 auto:

接下來討論垂直居中,麻煩的是垂直居中。不過垂直居中有比較通用的辦法,就是藉助table-cell的垂直居中。方法是為父容器增加以下屬性:

.container{ 
    display: table-cell;
    vertical-align: middle;
}
登入後複製

      效果如下:

CSS常見居中討論

magin屬性失效了,因為margin不適用於表格佈局。所以如果要把container居中的話,使用margin: 0 auto就不起作用了。解決的方法是在container外層再套多一個容器,然後讓這個display為block的容器margin: 0 auto就可以了。

      另外一個缺點是table-cell的元素設定寬高為百分比的時候將不起作用,常見的場景是要將寬度設定為外層容器寬度的100%,解決辦法是將container的寬度設定成一個很大的價值,例如3000px,這樣就達到100%的目的。還有一個問題是不相容IE6/7,但現在生產環境基本上不需要相容IE6/7了。

      這種方法有失效的時候,那就是container需要設定position為absolute時。因為設定position: absolute就會把(非flex)元素的display強制設定成block。解決辦法還是模仿上面的,外層再套多一個容器,將absolute作用於這個容器,副作用是設置內層container的height和width為百分比時會失效(除非將它的position也設置成absolute)。由於這個原因,導致有一種情況不能使用display: table-cell垂直居中。

      这种场景就是需要在页面弹个框,这个框的位置需要在当前屏幕左右上下居中:

CSS常見居中討論

      通常需要将这个框的positiion设置成absolute,这个时候table-cell就不能发挥作用了,即使你在外面再套多两层,最外层为absolute,里层为table-cell,但由于里层无法设置height为外层的100%,也就是说高度无法刚好占满整个屏幕,所以不能起作用。

      解决办法是使用relative定位,设置top为50%,再设置margin-top为元素高度的负的一半。一开始设置top 50%,将弹框的起始位置放到页面中间,然后再设置margin-top为弹框高度的一半取负,这样使得弹框在页面中间位置再往上移一半自身的高度,这样就刚好在正中间了,左右居中也可类似处理:

<style> 
    .mask{
        position: absolute; width: 100%; height: 100%;
    }
   .outer{
        position: relative;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
    }
    .container{
        width: 200px;
        height: 200px;
        display: table-cell;
        vertical-align: middle;
    }</style><p>
    </p><p>
        </p><p>

        </p>
    
登入後複製

效果如下:





CSS常見居中討論

火星

       这种办法的缺点是需要知道高度,无法根据内容长短自适应。所以就有了transform的方法,将margin-top一个具体的负值改成transform: translate(0, -50%),由于translate里面的面百分比是根据元素本身的高度计算的,于是就可以达到自适应的效果。将上面outer样式改为:

   .outer{
        position: relative;
        top: 50%;
        left: 50%;
width: 200px;
        transform: translate(-50%, -50%);
    }
登入後複製

      这个办法十分地方便,为了提高兼容性,需要添加-ms-和-webkit-前缀,缺点是IE8不支持。

      上面的两种办法:margin-top一个负值和translate -50%都有一个潜在的弊端, 就是如果设置left为50%是借助position为absolute的话,可能会导致换行:

<style>
    .container{
        position: relative;
    }
     .nav{
        position:absolute;
        left: 50%;
        transform: translate(-50%, 0);
        bottom: 0;
     }</style><p>
    <figure>    
        <img  src="/static/imghw/default1.png" data-src="Mars.png" class="lazy" alt="CSS常見居中討論" >
    </figure>   
    </p><p><span>地形</span><span>气候</span><span>运动</span></p> 
登入後複製

      效果如下:


CSS常見居中討論

地形气候运动

 

      可以看到,本来应该在一行显示的p元素却换行了,这是因为在一个relative元素里面absolute定位的子元素会尽可能地不超过容器的边界,通过把行内元素换行的方式。由于设置left为50%,导致p元素超了边界,所以就换行了,即使再translate -50%但已经晚了。即使是交换下两者的位置也是一样的效果,看得出浏览器执行的顺序始终是以absolute的定位优先。所以这种方法还是有不适合的场景,主要是用于左右居中定位为absolute的的情况。

      另外一个CSS3居中的办法是使用flex布局,flex布局居中十分容易和方便,只需要在父容器添加三行代码,例如上面的居中情况,可将.nav的样式改为:

    .nav{
        position:absolute;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }
登入後複製

      效果如下:


CSS常見居中討論

地形气候运动

       flex布局在自适应领域的功能真的是非常强大,不过IE的兼容性不好,所以说可能的话,不要太去照顾IE了。

 

      上面讨论的都是一些复合元素的居中,接下来分析单纯的行内元素的垂直居中。

      主要是要借助vertical-align: middle。如下,有一张图片和文字:

    <p>
        <img  src="/static/imghw/default1.png" data-src="Mars.png" class="lazy" alt="CSS常見居中討論" >
        <span>photo</span>
    </p>
登入後複製

      如果不做任何处理,那么默认的垂直居中是以baseline为基准:

CSS常見居中討論photo

      为了让它们能够垂直居中,需要改变它们的居中方式:

        .container img,
        .container span{
            vertical-align: middle;
        }
登入後複製

      注意每个元素都需要设置,效果:

CSS常見居中討論photo

       如果container的高度比图片还要高:

CSS常見居中討論photo

 

      为了让中间的内容能够在container里上下居中,可以设置文字的line-height为container的高度,那么文字就上下居中了,由于照片是和文字是垂直居中的,所以照片在container里也上下居中了,代码:

        .container span{
            vertical-align: middle;
            line-height: 150px;
        }
登入後複製

      效果:

CSS常見居中討論photo

       这也就给了一个启示,如果需要垂直居中一个p里的比p高度小的照片,可以添加一个元素,让它的line-height等于p的高度,如下:

<style>
        .container{
            width: 150px;
            height: 150px;
            text-align: center;
        }
       .container img{
            vertical-align: middle;
        }
        .container:before{
            content: "";
            vertical-align: middle; 
            line-height: 150px;
        }</style><p>
        <img  src="/static/imghw/default1.png" data-src="Mars.png" class="lazy" alt="CSS常見居中討論" ></p>
登入後複製

      或者是弄一个inline-block的元素,设置height为100%,这种的兼容性更好:

        .container:before{
            content: "";
            display: inline-block;
            vertical-align: middle; 
            height: 100%;
        }
登入後複製

     上下居中效果:

CSS常見居中討論

 

       还有另外一种方法借助absolute定位和margin: auto:

        .container{
            position: relative;
        }
       
        .container img{
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
登入後複製

      这个方法的神奇之处在于最后的margin: auto,这种方法也适用于p,但是需要给p显式指定一个height,不然p的height会达到外层容器的100%。

      如果图片比container大,这种方法就不适用了。因为有一种比较常见的场景是:照片有一边和container一样高,另外一边按照片的比例缩放,照片居中显示,超出的截断,这种应该叫“占满”(occupy)布局。这种情况,只需要把left/right/top/bottom/设成一个很大的负值即可:

        .container img{
            position: absolute;
            left: -9999px;
            top: -9999px;
            right: -9999px;
            bottom: -9999px;
            margin: auto;
        }
        .container{
            overflow: hidden;
        }
登入後複製

      效果:

CSS常見居中討論

      综合上面的讨论,左右居中常用text-align和margin: 0 auto,上下居中一种办法是借助table-cell,另外一种是设置top: 50%和margin-top/translate(0, -50%)结合的办法,还有就是使用flex布局,对于行内元素设置vertical-align: middle,同时借助一个高度为100%的元素达到垂直居中的效果。最后是position: absolute和margin: auto结合使用的办法。可以说没有一个方法可以100%适用,可以根据不同的情况合理结合使用。

      如果上文有不妥的地方,或者读者有其它的居中方式,还请指出

更多CSS常見居中討論相关文章请关注PHP中文网!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1318
25
PHP教程
1269
29
C# 教程
1248
24
如何使用HTML,CSS和JavaScript創建動畫倒計時計時器 如何使用HTML,CSS和JavaScript創建動畫倒計時計時器 Apr 11, 2025 am 11:29 AM

您是否曾經在項目上需要一個倒計時計時器?對於這樣的東西,可以自然訪問插件,但實際上更多

HTML數據屬性指南 HTML數據屬性指南 Apr 11, 2025 am 11:50 AM

您想了解的有關HTML,CSS和JavaScript中數據屬性的所有信息。

使Sass更快的概念證明 使Sass更快的概念證明 Apr 16, 2025 am 10:38 AM

在一個新項目開始時,Sass彙編發生在眼睛的眨眼中。感覺很棒,尤其是當它與browsersync配對時,它重新加載

當您看上去時,CSS梯度變得更好 當您看上去時,CSS梯度變得更好 Apr 11, 2025 am 09:16 AM

我關注的一件事是Lea Verou&#039; s conic-Gradient()Polyfill的功能列表是最後一項:

靜態表單提供商的比較 靜態表單提供商的比較 Apr 16, 2025 am 11:20 AM

讓我們嘗試在這裡造成一個術語:“靜態表單提供商”。你帶上html

如何在WordPress主題中構建VUE組件 如何在WordPress主題中構建VUE組件 Apr 11, 2025 am 11:03 AM

內聯式模板指令使我們能夠將豐富的VUE組件構建為對現有WordPress標記的逐步增強。

三種代碼 三種代碼 Apr 11, 2025 pm 12:02 PM

每次啟動一個新項目時,我都會將我正在查看的代碼分為三種類型,或者如果您願意的話。我認為這些類型可以應用於

php是A-OK用於模板 php是A-OK用於模板 Apr 11, 2025 am 11:04 AM

PHP模板通常會因促進Subpar代碼而變得不良說唱,但這並不是這樣的情況。讓我們看一下PHP項目如何執行基本的

See all articles