Question

我正在尝试将图像置于页面中心。我正在使用这个：

＆＃13;

#logo img {
  max-width: 100%;
  height: auto;
  width: auto\9;
  display: block;
  margin: 55px auto;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

#logo img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  margin-bottom: 100px;
}

＆＃13;

<div id="logo">
      <a href="http://sapsrp.x10.bz/">
        <img src="images/logo.png" alt="SAPS Logo">
      </a>
</div>

＆＃13;

我希望徽标只是链接，而不是旁边的空白区域。我的意思是，here

Answer 1

像这样调整你的CSS。您需要指定图像的宽度

#logo img {
  display: block;
  margin-top: 55px auto;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  width: 100px;
  height: auto;
}

#logo img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  margin-bottom: 100px;
}

<div id="logo">
  <a href="http://sapsrp.x10.bz/">
    <img src="images/logo.png" alt="SAPS Logo">
  </a>
</div>

Answer 2

使用以下规则更改您的css

#logo {
    text-align:center;
}

#logo img {
    max-width: 100%;
    height: auto;
    width: auto;
    margin: 55px auto;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

工作小提琴https://jsfiddle.net/za5cgfLw/2/

Answer 3

如果你想保持图片没有大小，可以删除标签并像这样更改标签。

<img src="images/logo.png" alt="SAPS Logo" onclick='window.location="http://sapsrp.x10.bz/"'>

这是一个轻微的黑客攻击，因为用户无法右键单击以在新选项卡中打开图像。注意，您还需要为img标签指定光标：指针样式

Answer 4

＆＃13;

#logo {
  text-align: center;
}
#logo a {
  display: inline-block;
  margin: 55px auto;
}
#logo img {
  max-width: 100%;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
}

#logo img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  margin-bottom: 100px;
}

＆＃13;

<div id="logo">
  <a href="http://sapsrp.x10.bz/">
    <img src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png" alt="SAPS Logo">
  </a>
</div>

＆＃13;

在页面上居中图像，整个div正在成为一个链接？

4 个答案: