lingers
on Oct 05, 2021 10:51 PM
1002 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
4
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
