Margin auto not working

#1

In one of the starting tutorial of ResponsiveWebDesign Course, it was mentioned we can use margin: auto to center anything

But below code is working fine, but is NOT CENTERED

.i_am_image {

            width: 30px;

            margin: auto;

        }

       

        .i_am_image:hover {

            animation-name: width;

            animation-duration: 500ms;

        }

       

        @keyframes width {

            100% {

                width: 40px;

            }

        }

    </style>

</head>

<body>

   
    <!-- To change animation on hovering -->

    <img class="i_am_image" src="https://cdn.freecodecamp.org/curriculum/applied-visual-design/google-logo.png" alt="Google's Logo" />
#2

Try to use display: block; property.

#3

You must have a <style> opening tag too…

#4

it is working now. but how?

#5

To make the image behave like heading elements (which are block-level), you must create an img type selector that uses the value block for the display property, and use the applicable margin values to center it horizontally.