Ads Top

How to Center an Image Vertically and Horizontally with CSS and html?

We need to create an image vertically and horizontally in center so need to create a image container as fixed size as given example: width:230px and height : 90px. Container need to add position:relative and define image propterty. Position:absolute also you can check on the below code.

All image using live path this is only for the demo purpose.

 

We can see below code:-


imageCenter.Html

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Image Center</title>

    <link href="imageCenter.css" rel="stylesheet" />

</head>

 

<body>

    <div class="imageContainer">

        <ul>

            <li>

                <img src="https://post.healthline.com/wp-content/uploads/2020/08/edible-flowers-732x549-thumbnail.jpg"

                    alt="image" />

            </li>

            <li>

                <img src="https://ia1.pickupflowers.com/images/assets/images/flower-guide/national-flowers.jpg"

                    alt="image" />

            </li>

            <li>

                <img src="https://cdn.britannica.com/88/194588-050-967E8D17/flowers.jpg" alt="image" />

            </li>

            <li>

                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Flower_poster_2.jpg/1200px-Flower_poster_2.jpg"

                    alt="image" />

            </li>

            <li>

                <img src="https://images-na.ssl-images-amazon.com/images/I/71zNWbTHzxL._SL1500_.jpg" alt="image" />

            </li>

            <li>

                <img src="https://www.kindpng.com/picc/m/139-1392610_transparent-flowers-vector-png-flower-vector-design-png.png"

                    alt="image" />

            </li>

        </ul>

    </div>

</body>

 

</html>

 

 

imageCenter.css

*,body{

    margin0;

    padding0;

    border0;

}

.imageContainer{

    margin20px auto;

    max-width1000px;

}

.imageContainer ul{

    list-stylenone;

}

.imageContainer ul li{

    margin10px;

    padding0px;

    positionrelative;

    displayinline-block;

    width230px;

    height90px;

    border1px solid #ccc;

    border-radius3px;

}

.imageContainer ul li img{

    positionabsolute;

    left0;

    right0;

    bottom0;

    top0;

    marginauto;

    text-aligncenter;

    max-width100%;

    max-height100%;

}



No comments:

Copyright Reserved to Anything Learn. Powered by Blogger.