Question

因此，我一直试图让我的网站上的徽标居中，并在手机上查看或更改浏览器大小时保持在中心位置，但无论我做什么，它都会越来越偏离中心，浏览器越小

这是我的代码：

    img#logo{
    top:20px; 
    width:570px; 
    height:125px;
    position: absolute;
    left:39%;
    }

Answer 1

<style>
img#logo{
top:20px; 
width:570px; 
height:125px;
position: absolute;
left:0;
right: 0;
margin: 0 auto;
}
</style>
<img id="logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ84hMKGYnLjbYASltpjWRIIumEGrwWPmkDFVkkr4hppCPekUIY">

Answer 2

通过块元素环绕图像并使用text-align：center。

div {
  width: 100%;
  text-align: center;
}

img#logo {
  width: 570px;
  height: 125px;
}

<div>
  <img id="logo" src="http://placehold.it/100">
</div>

Answer 3

试试这个：

img#logo{
    top:20px; 
    width:570px; 
    height:125px;
    position: absolute;
    left:50%;
    margin-left: -260px;
}

Answer 4

您可以使用position：absoulte和transform属性居中图像。图像将根据所有屏幕和所有分辨率重新调整

<style>

img#logo {
position: absolute;
width:570px; 
height:125px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<img id="logo" src="https://css-tricks.com/examples/FullPageBackgroundImage/images/bg.jpg">

希望这有帮助。

Answer 5

水平居中

使用以下css

img#logo {
  top: 20px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 570px;
  height: 125px;
}

＆＃13;

img#logo {
  top: 20px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 570px;
  height: 125px;
}

＆＃13;

<img id="logo" src="http://lorempixel.com/400/300">

＆＃13;

水平和垂直居中

使用以下css

img#logo {
  width: 570px;
  height: 125px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
}

＆＃13;

img#logo {
  width: 570px;
  height: 125px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
}

＆＃13;

<img id="logo" src="http://lorempixel.com/400/300">

＆＃13;

垂直居中

使用以下css

img#logo {
  width: 570px;
  height: 125px;
  position: absolute;
  top: 50%;
  left: 0;
  transform:translate(0, -50%);
}

＆＃13;

img#logo {
  width: 570px;
  height: 125px;
  position: absolute;
  top: 50%;
  left: 0;
  transform:translate(0, -50%);
}

＆＃13;

<img id="logo" src="http://lorempixel.com/400/300">

＆＃13;

在缩放浏览器/使用移动设备时，如何使图像居中而不会偏移？

5 个答案: