如何在屏幕*创建图像?

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

这是我的HTML代码。如何在所有屏幕的中心设置图像?

<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

这是我当前的CSS代码

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

4 个解决方案

#1

You're missing a background-position property:

你缺少一个背景位置属性:

background-position: center;

#2

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

如果图像的大小不是动态的，那么您可以在css中添加如下内容:

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

#3

use class from the img and use display block and margin auto this is how you do it

使用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 
}

your html code

你的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>

#4

Assuming you are trying to horizontally center the home img...

假设你正试图水平中心的家庭img…

Steps:

步骤:

Make the home img stretch to fit the width of the parent button div by making it's width "100%" instead of "100" px:
将home img扩展为适合父按钮div的宽度设置为“100%”，而不是“100”像素:

<img border="0" alt="Home" src="images/buttons/home.png" width="100%" height="100">

Change the css of your button1 div to this:
将button1 div的css更改为:

#button1 {
  width: 100px;
  margin: 0 auto;  //this does all the magic
}

To see it in action go to: https://jsfiddle.net/1215pcey/

要查看它的操作，请访问:https://jsfiddle.net/1215pcey/。

#1