Geek Answers Handbook

How to make the image in the center of the screen?

Here is my HTML code. How to set the image in the center of all screens?

<html>
<head>
    <title>Hub</title>
    <link rel="stylesheet" href="hub.css">
</head>
<body>
    <div id="button1">
    <img border="0" alt="Home" src="images/buttons/home.png" width="100" height="100">
    </div>
</body>

This is my current CSS code.

body {
background-image: url("beach.jpg");
background-size: cover;
background-repeat: no-repeat;
}
+4
source share
4 answers

You are missing a property background-position:

background-position: center;
+3
source

If the image size is not dynamic, you can add something like this to your css:

#button1 {
    width: 10%;/*or whatever size*/
    height: 10%;
    margin: 40% auto;
}
0
source

img auto,

hub.css

body {
background-image: url("beach.jpg");
background-size: cover;
background-repeat: no-repeat;
}

img.displayed {
display: block;
margin-left: auto;
margin-right: auto 
}

html-

<html>
<head>
<title>Hub</title>
<link rel="stylesheet" href="hub.css">
</head>
<body>

<img class ="displayed" border="0" alt="Home" src="images/buttons/home.png" width="100" height="100">
</div>
</body>
0

, img...

:

  • home img stretch div, "100%" "100" px:
<img border="0" alt="Home" src="images/buttons/home.png" width="100%" height="100">
  1. css 1 div :
#button1 {
  width: 100px;
  margin: 0 auto;  //this does all the magic
}

, : https://jsfiddle.net/1215pcey/

0

More articles:


All Articles