Question

这是我的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>

这是我目前的CSS代码

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

Answer 1

您错过了background-position财产：

background-position: center;

Answer 2

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

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

Answer 3

使用img中的类并使用display block和margin 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>

Answer 4

假设你试图将家庭img水平居中......

步骤：

使主页img拉伸以适应父按钮div的宽度，使其宽度＆＃34; 100％＆＃34; 而不是＆＃34; 100＆＃ 34; PX：

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

将button1 div的css更改为：

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

要查看实际操作，请转到：https://jsfiddle.net/1215pcey/

如何在屏幕中央制作图像？

4 个答案: