How to keep an image centered and responsive?

前端 未结 7 1218
没有蜡笔的小新
没有蜡笔的小新 2021-01-02 18:08

I have an image, centered both, horizontally and vertically

#logo01{
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-146px;  // half of hei         


        
7条回答
  •  心在旅途
    2021-01-02 18:34

    You can make use of display:table and display:table-cell property to achieve this.

    HTML:

    Logo

    CSS

    #logo_container {
        display:table;
        height:100px;
        width:100px;
        margin:0 auto;   
        text-align:center;
        border:1px solid #333;
    }
    
    #logo {
        display:table-cell;
        vertical-align:middle;
    
    }
    #logo img {
        max-height:80%;
        max-width:80%;
    }
    

    Here is the fiddle: http://jsfiddle.net/Qe2vG/

    You can see that image is aligned central vertically. Also in case of responsive style, just change the height and width value of #logo_container

提交回复
热议问题