Center image in page for both desktop and mobile view using CSS

lingers
 
on Oct 05, 2021 10:51 PM
514 Views

Please i want to centralize this image at the centre of the page.It worked well for mobile but does not work well for desktop.

Please i need the code did not work well for both mobile and desktop

My code

My code

<html>
  <head>
     <title>WELCOME TO INDUSTRIES</title>
   <style>
       .verticalhorizontal {
            display: table-cell;
            height:1400px;
            text-align: center;
            width: 1400px;
            vertical-align: middle;
        }
    </style>
  </head>
<body bgcolor="#000015"> 
<div class="verticalhorizontal">
    <img src="images/finalp.jpg" alt="centered image" />
</div>   
</body>
</html>

please help

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
arjunv
 
on Oct 12, 2021 01:40 AM

Hi lingers,

kindly refer below modified code.

HTML

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">
<head>
    <title>WELCOME TO INDUSTRIES</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            width: 15%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        @media(max-width:360px) {
            img {
                
                vertical-align: middle;
                text-align: center;
            }
        }
    </style>
</head>
<body bgcolor="#000015">
    <div class="verticalhorizontal">
        <img src="Image/1.jpg" alt="centered image" />
    </div>
</body>
</html>

Screenshots

DesktopView

MobileView